如何在 Angular 中将 Mat Table 网格扩展到第三级？

Question

I have created a Mat-Table with nested grid with a nested json . It has 2 grids for now . But now i have a requirement where i need an additional nested grid inside .

I tried to replicate what is done for the second level grid to generate the third level grid but the "ExpandedElements" array throws an error while generating the third level grid .

My updated JSON looks like -

{
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'
      },
    ]
  },

I want the comments to be an internal grid under address grid .

I have the 2 grids ready with the json in the stackblitz link -

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

Can anyone help me how to proceed with the third level of grid ?

Thanks

Answer 1

Edited your Stackblitz for a working example: https://stackblitz.com/edit/angular-nested-mat-table-triplenested?file=app/table-expandable-rows-example.html

Added the additional table and added bools directly on the datasource to show what is expanded and not (instead of the list functions). Also using simple arrays instead of dataSource. :)

---

On the div inside the table data:

<div class="example-element-detail" [@detailExpand]="element?.expanded"  *ngIf="element?.expanded">

On the row definition:

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
    [class.example-element-row]="element.addresses?.length" [class.example-expanded-row]="element?.expanded"
    (click)="element.expanded = !element?.expanded">
</tr>

It checks for the key expanded on element. The question mark is a null check, so if the key does not exist - element?.expanded returns undefined.

Also, when clicking the row, element.expanded is set to !element?.expanded. When clicking the first time, element?.expanded is undefined and adding an exclamation point in front of that inverts it - essentially setting it to true. Next time you click it will be set to the opposite of true - which is false. :)

There is no need to add it to the JSON directly, the bools will be added as needed when clicking the table.