Question

我有一个Angular材质组件，正在尝试使用新数据动态更新。

@ViewChild('tree') tree: MatTree<any>;
...
treeControl: NestedTreeControl<any>;
dataSource: MatTreeNestedDataSource<any>;
...
// This does not work
this.tree.renderNodeChanges(newData);

我可以很好地更改数据源数据，并将其反映在日志中，但是永远不会重新渲染树this.dataSource.data = newData;

此数据是从可观察的对象中检索的，每次发生更改时，我都会将其传递给我们。

<mat-tree [dataSource]="dataSource"
  [treeControl]="treeControl"
  #tree
  class="release-notes-tree">
  ...
</mat-tree>

仅传递全新数据并更新树的最简单方法是什么？

Answer 1

我对此进行了一些研究，导致在角材料github上出现了2个新问题。真的不是很明显，这是怎么回事，我认为这是一个错误。

触发ngchange并更新DOM

data = this.nestedDataSource.data
this.nestedDataSource.data = null;
this.nestedDataSource.data = data;

不会触发ngchange

this.dataSource.data = newData

我还没有尝试使用它，但是应该可以使用。不确定为什么不适合您。

<mat-tree #treeSelector></mat-tree>
@ViewChild('treeSelector') tree: matTree;
this.tree.renderNodeChanges()

Answer 2

data = this.nestedDataSource.data;
this.nestedDataSource.data = null;
this.nestedDataSource.data = data;

以上将不会触发onNgChange，因为实际上没有任何更改。方法完成后评估更改。您可以通过将数据复制到具有相同内容的另一个结构中来伪造更改。

Answer 3

难道不能只是将dataSource设置为Subject，然后在想要对其进行更改时调用dataSource.next（）吗？

如何动态更新嵌套的mat-tree

3 个答案: