角度材质树中的对象数组

问题描述

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

I want to display a tree of object.names as expandable nodes, when the user clicks on an object.name all propertys of this object, except the name, should be displayed as leaf nodes. I have followed this tutorial https://material.angular.io/components/tree/overview to create an flat tree.

您会看到他们将这种结构用于数据源:

You see they use this structure for the datasource:

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

我从后端收到以下结构:

I have the following structure, which I receive from my backend:

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

我已经设法将我的结构转移到与示例相似的地方.你可以在这个 stackblitz 例子中看到它:

I have managed to transfer my structure to be similar as the examples. You can see it in this stackblitz example:

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

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

That enables me to show the properties as leaf nodes. Unfortunately I use string interploation to achive this because I didn't found a way to receive the data in the template as keyValuePairs. My goal is to create an button next to the expandable node which enables the user to pass the object to a form. The form should display all the properties. It is hard to achive this when the Object keys are all named as "name". Is it possible to achive something like this with mat-tree?

我想要实现的是将数组对象传递给 MatTreeFlatDataSource 数据源，该数据源与我从后端收到的对象具有相似的结构.

What I want to achive is to pass an Object of Arrays to the MatTreeFlatDataSource dataSource, that has an similar structure as my the Object which I receive from my backend.

我有当前的结构 MatTreeFlatDataSource 数据源:

I have the current structure MatTreeFlatDataSource dataSource:

数据源中的当前结果

在模板中导致此结果:

模板中的当前结果

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

The template result looks good, that was kind of a sucsess, but you see the Object keys are all named as "name". You can see that the mat-tree defines an variable in the template *matTreeNodeDef="let node". This is the Object which I want to pass to a form. At the moment it has the structure like you see in the pictures. I want to have something like this:

想要的结果

推荐答案

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

To create a form for each extendable node, there should be only one leaf for a node, which is a form group.In that leaf you'll have as many inputs as you'd like. best if you'll add them hard coded.

如果您将使用 ReactiveFormsModule，那么叶子将是一个表单组，而树将是一个表单数组.

If you'll use ReactiveFormsModule, than the leaf will be a form group, and the tree will be a form array.

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

When you create the data structure for the tree, also create the form structure. Create the FormArray in the same loop.

看看下面的例子:

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

这篇关于角度材质树中的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！