angular - 剑道 UI 树视图与复选框一起被锁定

Question

当我在 Treeview 中使用isChecked函数时，所有复选框都被锁定并且无法更改

public data: any[] = [
 { id: 1, isChecked: true, text: 'Furniture' },
 { id: 2, isChecked: false, text: 'Tables & Chairs' },
 { id: 3, isChecked: true, text: 'Sofa 1' },
 { id: 4, isChecked: false, text: 'Sofa 2' }
];

public isChecked = (dataItem: any, index: string): CheckedState => {
  if (dataItem.isChecked === true) {
   return 'checked';
  }
 return 'none';
}

HTML：

<kendo-treeview [nodes]="data" textField="text" kendoTreeViewExpandable kendoTreeViewCheckable [checkBy]="'id'" [isChecked]="isChecked">
</kendo-treeview>

演示

标签： angularkendo-ui-angular2

Answer 1

您可以通过将(checkedChange)事件添加到您 的 kendo -treeview来消除此问题

<kendo-treeview [nodes]="data" textField="text" (checkedChange)="checkChagne($event)" kendoTreeViewExpandable kendoTreeViewCheckable [checkBy]="'id'" [isChecked]="isChecked">
</kendo-treeview>


public checkChagne($event) {
 $event.item.dataItem.isChecked = !$event.item.dataItem.isChecked;
}