Angular Kendo TreeView节点文本更新不即时生效问题咨询

核心原因 #

Kendo TreeView的视图更新依赖数据的不可变性——它只会在数据源的引用发生变化时重新渲染节点。你直接修改selectedNode.item.dataItem.text属于对现有对象的内部属性修改，TreeView无法检测到这种变化，所以不会即时更新视图。而切换选中状态时，TreeView会重新渲染选中节点，这才显示出修改后的文本。

另外，手动调用cd.detectChanges()无效，因为Angular的变更检测能感知属性变化，但Kendo TreeView自身的渲染逻辑是绑定到数据源的引用，而非单个属性的变更。

解决方法 #

你需要通过替换整个dataItem对象来保持数据的不可变性，让TreeView检测到数据源变化：

this.formControls.assetGroupNameControl.valueChanges.subscribe(value => {
  let selectedNode = this.treeview.itemLookup(this.currentTreeIndex);
  // 创建新的dataItem对象，替换原有对象
  selectedNode.item.dataItem = { ...selectedNode.item.dataItem, text: value };
  // 如果TreeView绑定的是数组型数据源，需更新数组引用触发重新渲染
  // 假设数据源为treeData数组：
  // this.treeData = [...this.treeData];
});

如果TreeView绑定的是数组，修改完dataItem后，还要用扩展运算符生成新数组替换原数组，确保TreeView能触发全局的重新渲染。

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