如何将嵌套Mat表网格应用到Angular中的第三级

Question

通过大量在线研究和帮助，我创建了一个带有嵌套网格和嵌套json的Mat表。目前它有两个网格。但现在我有一个需求，需要在里面添加一个嵌套网格。

我试图复制为第二级网格所做的事情以生成第三级网格；ExpandedElements"数组在生成第三级网格时抛出错误。

我更新的JSON看起来像-

{
name: 'Mason',
email: '[e-mail]',
phone: '9864785214',
addresses: [
{
street: 'Street 1',
zipCode: '78542',
city: 'Kansas',
comments: [
{
commenID: 1,
comment: 'Test',
commentStatus: 'Open'
},
{
commenID: 2,
comment: 'Test',
commentStatus: 'Open'
},{
commenID: 3,
comment: 'Test',
commentStatus: 'Closed'
},
]
},

我希望评论是地址网格下的一个内部网格。

我在stackblitz链接-中准备好了2个网格的json

https://stackblitz.com/edit/angular-nested-mat-table-sia2jn?file=app%2Ftable-可扩展-rows-example.ts

有人能帮助我如何进行第三级网格吗？

感谢

Answer 1

您可以为地址上的嵌套注释设置一个类似的变量：

innerExpandedElements: any[] = [];

然后添加另一个切换功能来管理该列表：

toggleAddress(address) {
const index = this.innerExpandedElements.findIndex(x => x === address);
if (index === -1) {
this.innerExpandedElements.push(address);
} else {
this.innerExpandedElements.splice(index, 1);
}
}

当这些元素在你的数组中时，在你的模板中显示：

*ngIf="innerExpandedElements.includes(address)"

我举了一个很快的例子。它使用ul，没有动画，但在概念上应该是一样的。https://stackblitz.com/edit/angular-nested-mat-table-ynf8vb?file=app%2Ftable-expandable-rows-example.html