Angular 材质树中的对象数组

Posted

技术标签:

【中文标题】Angular 材质树中的对象数组【英文标题】:Array of Objects in Angular Material Tree 【发布时间】:2020-11-11 00:08:26 【问题描述】:

我想将 object.names 树显示为可扩展节点,当用户单击 object.name 时,该对象的所有属性(名称除外)都应显示为叶节点。我已经按照本教程https://material.angular.io/components/tree/overview 创建了一个扁平树。

您看到他们使用这种结构作为数据源:

...

    name: 'Fruit',
    children: [
          name: 'Apple',
          name: 'Banana',
          name: 'Fruit loops',
    ]
,
...

我从后端收到以下结构:

...

    id: 1,
    name: "ServerConnection1",
    server: "Server1",
    enabled: true
,
...

我已设法将我的结构转换为与示例相似。您可以在这个 stackblitz 示例中看到它:

https://stackblitz.com/edit/angular-q5f5nu

这使我能够将属性显示为叶节点。不幸的是,我使用字符串插值来实现这一点,因为我没有找到一种方法来接收模板中的数据作为 keyValuePairs。我的目标是在可展开节点旁边创建一个按钮,使用户能够将对象传递给表单。表单应显示所有属性。当对象键都被命名为“名称”时,很难做到这一点。是否有可能使用 mat-tree 实现这样的目标?

编辑:我想要实现的是将数组对象传递给 MatTreeFlatDataSource 数据源,它与我从后端收到的对象具有相似的结构。

我有当前结构 MatTreeFlatDataSource 数据源:

current result in dataSource

在模板中导致这个结果:

current result in template

模板结果看起来不错,这是一种成功,但是您看到对象键都被命名为“名称”。可以看到 mat-tree 在模板*matTreeNodeDef="let node" 中定义了一个变量。这是我要传递给表单的对象。目前,它具有您在图片中看到的结构。我想要这样的东西:

desired result

【问题讨论】:

您能否添加更具体的解释?您要实现的树的结构是什么? @noamsteiner 谢谢你的回答。对于给您带来的不便,我深表歉意,我已经编辑了我的问题以更好地描述我的问题。 我明白了,您想要以表格形式获得所需的结果吗?每个键都有一个input 元素? @noamsteiner 是的,这将是我的目标。 【参考方案1】:

要为每个可扩展节点创建一个表单,一个节点应该只有一个叶子,即一个表单组。 在那片叶子中,您将拥有任意数量的输入。最好是硬编码添加它们。

如果您使用ReactiveFormsModule,则叶子将是一个表单组,而树将是一个表单数组。

为树创建数据结构时,还要创建表单结构。在同一循环中创建FormArray

查看以下示例:

https://stackblitz.com/edit/angular-q5f5nu-a8bkvc?file=src%2Fapp%2Ftree-flat-overview-example.html

【讨论】:

非常感谢 :) 表格将在垫子抽屉容器的右侧,但我了解您的原则并且可以使用它。谢谢你,祝你有美好的一天。

以上是关于Angular 材质树中的对象数组的主要内容,如果未能解决你的问题,请参考以下文章

从 Angular 6 材质树中的子节点获取父层次结构

如何循环遍历对象数组中的对象数组并使用 Angular/Ionic 在我的 HTML 中显示?

使用Angular2中的接口将对象推送到新数组中

如果第二个数组的项目包含数组的第一个对象的 id,则合并 Angular 8 中的两个对象数组

使用Angular语法删除数组中的对象[重复]

如何用angular中的另一个数组的子对象创建一个数组