Angular关联属性变更检测问题：TreeView无法更新数据

问题原因 #

你的field对象初始化时，dataSource引用的是初始的空hierarchicalData数组。当你在readHierarchicalData中重新赋值hierarchicalData为新数组时，field里的dataSource仍然指向原来的空数组（对象引用未更新），导致TreeView无法感知到数据源变化。

解决方案 #

修改readHierarchicalData函数，在更新hierarchicalData后，同步更新field对象，让Angular变更检测捕捉到变化：

readHierarchicalData(e: any): void {
    this.hierarchicalData = [
        {
             id: '01', name: 'Asset', expanded: true,
             subChild: [
                 {
                     id: '01-01', name: 'Motor',
                     subChild: [
                         { id: '01-01-01', name: 'Shaft' },
                      ]
                   },
                ]
        }
    ];
    // 重新赋值field对象，触发TreeView数据刷新
    this.field = { 
        dataSource: this.hierarchicalData, 
        id: 'id', 
        text: 'name', 
        child: 'subChild' 
    };
    // 也可以用扩展运算符简化写法：
    // this.field = { ...this.field, dataSource: this.hierarchicalData };
}

替代方案（手动触发变更检测） #

如果不想修改field对象，可通过手动触发Angular变更检测实现：

1. 先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 在readHierarchicalData末尾调用变更检测：

this.cdr.detectChanges();

推荐优先使用第一种方案，更贴合Syncfusion TreeView的绑定逻辑。

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