在 Kendo 中为 Angular TreeView 获取节点元数据

Question

In this plunk 我有一个 Kendo 用于 Angular TreeView。我向树结构添加了一个 value 字段，并向节点添加了一个 click 事件。我需要的是在控制台中获取单击的节点的值。如何实现？

@Component({
    selector: 'my-app',
    template: `
    <kendo-treeview
        [nodes]="data"
        textField="text"
        kendoTreeViewExpandable
        kendoTreeViewSelectable
        kendoTreeViewHierarchyBinding
        childrenField="items"
        (click)="showClick($event)"
    >
    </kendo-treeview>
  `
})
export class AppComponent {

    showClick(event){
      console.log(event);
    }

    public data: any[] = [
        {
            text: 'Furniture', value: "0", items: [
                { text: 'Tables & Chairs', value: "10" },
                { text: 'Sofas', value: "11" },
                { text: 'Occasional Furniture', value: "12" }
            ]
        },
        {
            text: 'Decor', value: "0", items: [
                { text: 'Bed Linen', value: "13" },
                { text: 'Curtains & Blinds', value: "14" },
                { text: 'Carpets', value: "15" }
            ]
        }
    ];
}

Answer 1

您可以使用树视图 selectionChange 事件：

<kendo-treeview
    ...
    (selectionChange)="showClick($event)"
>
</kendo-treeview>


showClick(event){
  console.log(event.dataItem.value);
}

好像是点击触发的，包含被点击的节点dataItem： https://plnkr.co/edit/tcUxkkVExZSuEGGSWfia?p=preview

在 Kendo 中为 Angular TreeView 获取节点元数据

Getting node metadata in Kendo for Angular TreeView

kendo-ui

kendo-ui-angular2