Javascript 如何使用角材质在具有可展开行的表中创建嵌套的垫表

我有以下数据

[
{
“_id”：“c9d5ab1a”，
“子域”：“翼”，
“域”：“飞机”，
“零件id”：“c9d5ab1a”，
“info.mimetype”：“application/json”，
“依赖信息”：“父项”，
“嵌套”：[
{
“域”：“飞机”，
“_id”：“c1859902”，
“info.mimetype”：“image/jpeg”，
“依赖信息”：“c9d5ab1a”，
“零件id”：“c1859902”，
“子域”：“尾部”
}
]
},
{
“_id”：“1b0b0a26”，
“子域”：“燃料”，
“域”：“飞机”，
“零件id”：“1b0b0a26”，
“info.mimetype”：“image/jpeg”，
“依赖信息”：“无父项”
}
]

这里如果

“info.dependent”：“parent”

则它是嵌套的，如果

“info.dependent”：“no\u parent”

则它没有子级。我试图创建一个动态表，但我一直在研究如何使用嵌套表使其可折叠/可扩展。 这是我的密码

{{col}}
{{element[col]}

.ts

公共数据=[
{
“_id”：“c9d5ab1a”，
“子域”：“翼”，
“域”：“飞机”，
“零件id”：“c9d5ab1a”，
“info.mimetype”：“application/json”，
“依赖信息”：“父项”，
“嵌套”：[
{
“域”：“飞机”，
“_id”：“c1859902”，
“info.mimetype”：“image/jpeg”，
“依赖信息”：“c9d5ab1a”，
“零件id”：“c1859902”，
“子域”：“尾部”
}
]
},
{
“_id”：“1b0b0a26”，
“子域”：“燃料”，
“域”：“飞机”，
“零件id”：“1b0b0a26”，
“info.mimetype”：“image/jpeg”，
“依赖信息”：“无父项”
}
];
数据源=新MatTableDataSource（[]）；
displayedColumns=[''子域'，'域'，'部分id'，'信息mimetype'，'信息依赖']；
构造函数（）{
this.displayedColumns=this.displayedColumns；
this.dataSource=新MatTableDataSource（this.data）；
}

所需格式：-->

嵌套格式如下所示

第1行-->\u id，子域，域，依赖信息

当我们单击那个特定的行时，它必须展开并显示一个包含列名和行数据的表中的嵌套数据

“嵌套”：[
{
“域”：“飞机”，
“_id”：“c1859902”，
“info.mimetype”：“image/jpeg”，
“依赖信息”：“c9d5ab1a”，
“零件id”：“c1859902”，
“子域”：“尾部”
}
]

查看以下内容：

• 在

• 缺少

  @detailExpand

  触发器

文档中的示例是否包含您的数据

编辑（关于评论）

以下是获取动态列的方法：

将其添加到组件中

  getKeys(object): string[] {
    return Object.keys(object);
  }

使用模板中的方法（模板根据附加的详细信息屏幕和

嵌套

键下关于多个元素的注释进行更新）：

{{key}}
{{element[key]}
没有父母

注意：对于那些想跳过冗长解释的人，这里是

实际上，您需要创建一个嵌套的

mat表

，其中所有嵌套表都是可排序的，并且也可以进行筛选

首先，由于需要在嵌套表中使用筛选和排序，因此需要为其创建一个新的

MatTableDataSource

。这可以在如下所示的

ngOnInit

中创建主

dataSource

时完成

usersData:User[]=[]；
USERS.forEach（user=>{
if（user.addresses&&Array.isArray（user.addresses）&&user.addresses.length）{
this.usersData=[…this.usersData，{…user，addresses:new MatTableDataSource（user.addresses）}]；
}否则{
this.usersData=[…this.usersData，user]；
}
});
this.dataSource=新的MatTableDataSource（this.usersData）；

从可展开行中，我们可以看到如何创建可展开行。在可展开行中，我们现在将有一个表以及

过滤器

输入。我们将添加一些条件，以便仅当存在

地址时，行才可展开


{{innerColumn}}
{{element[innerColumn]}

现在，行仅在有嵌套元素时才展开，我们需要为没有
地址的用户取消悬停

这里是CSS负责在悬停状态下添加背景色

tr.example-element-row:not（.example-expanded row）：悬停{
背景：#777；
}

因此，如果行具有
地址，我们只需要将
示例元素行
类添加到我们的行中。如果该行没有地址，则该行不应可单击，并且不应出现向用户指示该行实际上不可单击的悬停



在
toggleRow
中，我们将定义当您单击模板中的一行时发生的事情的逻辑。当用户单击此函数中的行时，我们还将实现
sort

@ViewChildren（'innerSort'）innerSort:QueryList；
切换行（元素：用户）{
element.addresses&&（element.addresses作为MatTableDataSource。
对于具有可展开行的表，使用角度材质示例，您从何处获取