jqwidgets 和 angular 5 项目选择事件调用 double

Posted 2023-05-08

【中文标题】jqwidgets 和 angular 5 项目选择事件调用 double

【英文标题】：jqwidgets and angular 5 item select event call double

【发布时间】：2018-09-06 23:41:16

【问题描述】：

我使用 angular 和 jqwidgets 创建下拉按钮，当我修复树的 html 代码时一切正常，但是当我使用 json Source 时，OnSelect 事件重复了 2 次，那么我应该如何修复它？

export class myDropDownComponent implements AfterViewInit 

      @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent;
      @ViewChild("treeReference") tree: jqxTreeComponent;

      treeSource =
        [
            
                icon: "", label: "Mail", expanded: true, value : "1",
                items:
                [
                     icon: "", label: "Calendar", value : "11" ,
                     icon: "", label: "Contacts", selected: true, value : "12" 
                ]
            ,
            
                icon: "", label: "Inbox", expanded: true, value : "2",
                items:
                [
                     icon: "", label: "Admin",value : "21" ,
                     icon: "", label: "Corporate",value : "22" ,
                     icon: "", label: "Finance" ,value : "23",
                     icon: "", label: "Other",value : "24" ,
                ]
            
        ];



 treeSettings: jqwidgets.TreeOptions =
    
        width: "300px",
        height: "370px",
        source: this.treeSource,        
     

    ngAfterViewInit(): void    
        this.tree.createComponent(this.treeSettings);       
        this.tree.onSelect.subscribe(x => this.treeOnSelect(x));
    

    treeOnSelect(event: any): void       
        // THIS EVENT REPEATED 2 TIMES
        let item = this.tree.getItem(event.args.element);
        console.log(item.value);
    

【参考方案1】：

您在两个地方绑定到此事件。 一次使用“this.tree.onSelect.subscribe”，第二次使用“treeOnSelect(event: any)”。

我在他们的website上看到建议将其作为属性添加到组件中：

<jqxTree #myTree(onSelect)="Select($event)" [width]="300">
...

并且在组件中实现为：

export class AppComponent 
    Select(event: any): void 
    
        // Do Something