Kendo UI Angular 2 Tree删除子节点后无法刷新问题求助

看起来你遇到的问题是Kendo UI Tree组件没有检测到数据源的变化，导致删除节点后界面没有更新——虽然你已经正确减少了子节点的数量，但组件本身不知道数据发生了变更，所以没有触发重新渲染。

问题根源 #

Kendo UI for Angular的TreeView组件，对于嵌套数据源的深层变更，有时候无法自动检测到（尤其是直接修改已有节点的items数组时），这时候需要手动通知组件数据发生了变化。

解决方案 #

你只需要在修改完数据源后，手动触发TreeView的刷新逻辑即可，具体步骤如下：

1. 给TreeView添加模板引用

在你的模板代码里，给Kendo TreeView组件加上一个模板引用变量：

<kendo-treeview #treeView [nodes]="data" ...></kendo-treeview>

2. 在组件中获取TreeView实例

在组件类里，通过ViewChild获取这个TreeView的实例：

import { ViewChild } from '@angular/core';
import { TreeViewComponent } from '@progress/kendo-angular-treeview';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild('treeView') treeView: TreeViewComponent;
  // ...其他组件代码
}

3. 修改删除方法，添加刷新通知

更新你的removeItem方法，在修改完节点数据后，调用TreeView的notifyChanges()方法强制刷新：

removeItem() { 
  let nodeRef = this.getNodeRef(false); 
  // 过滤选中节点，filter会返回新数组，确保数组引用变化
  nodeRef.items = nodeRef.items.filter(item => item !== this.selectedItem);
  // 通知TreeView数据已变更，触发界面刷新
  this.treeView.notifyChanges();
}

额外提示 #

如果你的getNodeRef方法返回的是数据源节点的副本而非原对象，那修改它不会影响TreeView绑定的实际数据源，这时候你需要确保直接更新绑定的data数组本身。另外，也可以尝试用不可变数据更新的方式（比如通过扩展运算符创建新数组/对象），让Angular的变更检测自动识别到变化，不过调用notifyChanges()是针对Kendo TreeView最直接的解决方案。

内容的提问来源于stack exchange，提问作者AngularChan