时间戳

首页 > 解决方案 > Angular 材质树中的对象数组

angular - Angular 材质树中的对象数组

问题描述

我想将 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 数据源：

数据源中的当前结果

这导致模板中的结果：

模板中的当前结果

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

期望的结果

标签： angulartypescriptangular-materialangular-material2

解决方案

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

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

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

查看以下示例：

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

推荐阅读