Angular 6 Material Nested Tree 不适用于动态数据

标签 angular typescript angular-material2

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

使用Material Examples中给出的Flat Tree的动态数据示例我尝试对 Nested Tree 使用相同的概念。这是我到目前为止尝试过的https://stackblitz.com/edit/angular-naarcp

但它只显示数据数组中预填充的数据,尽管在控制台中很明显数据正在更新,但它永远不会显示在 UI 上。

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

我无法在 _getChildren 中添加动态子项,因为它会递归调用直到最后一个节点。

注意事项:

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

帮助

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

最佳答案

当我在它第一次出现时实现时遇到了困难,发现 UI 没有更新,因为对对象属性的更改不会被更改检测拾取。请在这里通读我原来的问题和答案。它适用于一棵扁平的树,但可能会节省您数小时的敲头时间。

Why is my angular app becoming very slow after changing the data backing a mat-tree?

关于Angular 6 Material Nested Tree 不适用于动态数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51764673/

相关文章:

javascript - Intellij 应该在 Typescript 文件中使用单括号

css - Angular 2 ngClass 条件数据?

javascript - 在工具提示 Highcharts 上显示百分比 Angular 2

angular - ASP.NET 核心 Angular SPA 模板将自定义 Bootstrap 主题添加到 webpack.config.js

typescript - 如何使用 typescript 生成正确的文件顺序?

Angular Material Design - 固定侧边栏

angular - 如何使用 angular 2+ 创建和下载具有动态内容的文本/Json 文件

node.js - 如何从 typeorm 实体中排除列,并且可以选择使用 Find 方法获取该列

angular - 禁用 mdInput 文本字段的 float

Angular Material 设计 - 如何添加自定义按钮颜色?