Angular 6 Material Nested Tree 不适用于动态数据 [英] Angular 6 Material Nested Tree is not working with dynamic data

问题描述

我在 Angular 6 中使用 mat-tree 和 mat-nested-tree-node.我想要的是在用户切换展开图标时动态加载数据.

I am using mat-tree with mat-nested-tree-node in Angular 6. What I want is to load the data dynamically when the user toggles expand icon.

使用材料示例<中给出的Flat Tree的动态数据示例 我尝试对 Nested Tree 使用相同的概念.这是我迄今为止尝试过的https://stackblitz.com/edit/angular-naarcp

Using the dynamic data example of Flat Tree given in Material Examples I have tried to use the same concept for Nested Tree. This is what I have tried so far https://stackblitz.com/edit/angular-naarcp

但它只显示预先填充在数据数组中的数据，尽管在控制台中很明显数据正在更新，但它从未显示在 UI 上.

But it only shows the data which was prepopulated in the data array although in the console it is clear that data is getting updated but it never gets shown on the UI.

它为节点parent, child1, child2, child3递归调用_getChildren方法，因为这是初始数据.我在 child1 和 child3 中添加 My Child 当用户展开它但从未显示添加的节点.

It recursively calls the _getChildren method for the nodes parent, child1, child2, child3 because this is initial data. I am adding My Child in child1 and child3 when user expands it but the added node is never shown.

我不能在 _getChildren 中添加动态子节点，因为它会被递归调用直到最后一个节点.

I can not add dynamic children in _getChildren because it gets called recursively till last node.

我不想使用扁平树，因为它管理单个数组中的所有内容，并且在异步加载数据时更新单个数组变得非常困难

I dont want to use Flat tree because it manages everything in single array and updating the single array gets really difficult in asynchronous loading of data

有什么我遗漏的地方吗?或者嵌套的树被设计为以这种方式工作?

Is there anything I am missing or nested trees are designed to work this way?

推荐答案

当我在它第一次出现时重新实现时，我很挣扎，发现 UI 没有更新，因为更改检测没有检测到对对象属性的更改.请阅读我的原始问题并在此处回答.这是一棵扁平的树，但可能会为您节省数小时的敲头时间.

I struggled when I implemented back when it first came out and found the UI wasnt updating because changes to an objects's properties do not get picked up by change detection. Please read through my original question and answer here. It is for a flattened tree but might save you hours of banging your head.

为什么我的 Angular 应用程序在更改支持 mat-tree 的数据后变得非常慢?

这篇关于Angular 6 Material Nested Tree 不适用于动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！