angular - 如何确保NzTreeFlatDataSource与treeControl.dataNodes数据一致?

Question

 treeControl = new FlatTreeControl<any>(
    node => node.level,
    node => node.expandable
  );

  treeFlattener = new NzTreeFlattener(
    this.transformer,
    node => node.level,
    node => node.expandable,
    node => node.children
  );

  dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);

  hasChild = (_: number, node: any): boolean => node.expandable;
ngOnChanges(changes: SimpleChanges) {
this.dataSource.setData(orderList.currentValue);}

updateTreeNode() {
    this.orderList.forEach((item: any) => {
      if (item.itemList) {
        item.itemList.forEach((i: any) => {
          i.key = item.key;
          i.isItem = true;
          i.isCheck = false;
          i.partId = i.defaultPartId;
          i.strengthId = i.defaultStrengthId;
          i.defaultItemId = i.itemId;
        });
      }
      item.children = item.itemList;
    });

    console.log('传入的orderList', this.orderList);
    this.dataSource.setData([...this.orderList]);
    console.log('dataSource', this.dataSource.getData());
    console.log('dataNodes', this.treeControl.dataNodes);
    this.cd.markForCheck();
  }

我初始化树的时候，先将传入的orderList赋值给dataSource，然后我改变了这个orderList的时候，需要修改树视图的dataSource的值，和orderList同步数据，问题是dataSource的_data的值改变了，但treeControl.dataNodes的值还是初始化的值，怎么改变都无效，改怎么做

Answer 1

在Angular中使用NzTreeFlatDataSource和FlatTreeControl时，确保dataSource和treeControl.dataNodes同步的关键在于正确更新数据源并通知变更检测机制。从你提供的代码来看，你已经尝试在updateTreeNode方法中更新dataSource，但是可能缺少了某些步骤来确保treeControl能够识别到这些变更。

以下是一些可能的解决方案和建议：

1. 确保treeControl和dataSource的数据绑定正确：
   确保treeControl和dataSource是在组件的同一生命周期阶段被正确初始化和配置的。这通常发生在ngOnInit生命周期钩子中。
2. 直接操作dataNodes：
   通常不建议直接操作treeControl.dataNodes，因为这是一个内部管理的数组。你应该总是通过dataSource.setData()来更新数据，这样treeControl可以自动处理节点数据的更新。
3. 使用Angular的变更检测：
   你已经调用了this.cd.markForCheck();，这是一个好的开始。确保你正确注入了ChangeDetectorRef并在组件的构造函数中进行了初始化。
4. 检查orderList的引用变化：
   当你调用this.dataSource.setData([...this.orderList]);时，你正在创建一个orderList的浅拷贝。这通常足以触发dataSource的更新，但如果orderList中的对象引用没有改变（只是属性改变了），则可能需要更深入地处理。
5. 检查transformer函数：
   你的NzTreeFlattener使用了一个transformer函数，但没有在你的代码示例中给出。确保这个transformer函数能够正确地将原始数据转换为适合树控件的格式，并且在数据更新时能够反映这些变更。
6. 调试和日志：
   在updateTreeNode方法的开始和结束处添加日志，以确保该方法被正确调用，并且orderList确实在调用前后有所变化。同时，检查dataSource.getData()和treeControl.dataNodes在更新后的状态。
7. 考虑使用Angular的trackBy功能：
   如果你在使用模板渲染树节点，并且发现性能问题或更新问题，考虑在*ngFor指令中使用trackBy来优化DOM的更新。
8. 完全重新设置dataSource：
   如果上述方法都不奏效，你可以尝试在更新数据时完全重新设置dataSource，而不是仅仅更新其数据。但这通常不是推荐的做法，因为它可能会导致不必要的DOM操作。

如果问题依旧存在，建议逐步检查每一步的执行情况，并考虑在更新数据时添加更多的日志输出来跟踪数据的变化。