如何将嵌套的Mat-Table网格应用于Angular中的第三层？

Question

通过大量的在线研究和帮助，我已经创建了一个带有嵌套网格的Mat-Table和一个嵌套的json。到目前为止，它有两个网格。但是现在我有了一个需求，我需要一个额外的嵌套网格。

我试图复制为第二级网格所做的操作来生成第三级网格，但"ExpandedElements“数组在生成第三级网格时抛出错误。

我更新的JSON看起来像-

{
name: 'Mason',
email: 'mason@test.com',
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'
      },
    ]
  },

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

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

https://stackblitz.com/edit/angular-nested-mat-table-sia2jn?file=app%2Ftable-expandable-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