Angular Material 树中的对象数组
Array of Objects in Angular Material Tree
我想将 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 dataSource:
current result in dataSource
在模板中导致此结果:
current result in template
模板结果看起来不错,有点成功,但是你看到对象键都被命名为“name”。可以看到mat-tree在模板*matTreeNodeDef="let node"
中定义了一个变量。这是我要传递给表单的对象。目前它具有您在图片中看到的结构。我想要这样的东西:
desired result
要为每个可扩展节点创建一个表单,一个节点应该只有一个叶子,即一个表单组。
在那片叶子中,您将拥有任意数量的输入。最好将它们硬编码。
如果您使用 ReactiveFormsModule
,那么叶子将是一个表单组,而树将是一个表单数组。
在为树创建数据结构时,还要创建表单结构。在同一个循环中创建 FormArray
。
查看以下示例:
https://stackblitz.com/edit/angular-q5f5nu-a8bkvc?file=src%2Fapp%2Ftree-flat-overview-example.html
我想将 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 dataSource:
current result in dataSource
在模板中导致此结果:
current result in template
模板结果看起来不错,有点成功,但是你看到对象键都被命名为“name”。可以看到mat-tree在模板*matTreeNodeDef="let node"
中定义了一个变量。这是我要传递给表单的对象。目前它具有您在图片中看到的结构。我想要这样的东西:
desired result
要为每个可扩展节点创建一个表单,一个节点应该只有一个叶子,即一个表单组。 在那片叶子中,您将拥有任意数量的输入。最好将它们硬编码。
如果您使用 ReactiveFormsModule
,那么叶子将是一个表单组,而树将是一个表单数组。
在为树创建数据结构时,还要创建表单结构。在同一个循环中创建 FormArray
。
查看以下示例:
https://stackblitz.com/edit/angular-q5f5nu-a8bkvc?file=src%2Fapp%2Ftree-flat-overview-example.html