如何将Nested Mat-Table Grid应用到Angular中的第三层？

Question

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

我试图复制对二级网格所做的操作以生成三级网格，但是“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'
      },
    ]
  },

我希望评论成为地址网格下的内部网格。

我在 stackblitz link -

中使用 json 准备好了 2 个网格

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

如何将Nested Mat-Table Grid应用到Angular中的第三层？

How to apply Nested Mat-Table Grid to the third level in Angular?

angular-material

angular