Angular Mat Table with Nested objects

Question

我有一个这样设置的数据源

[
  {
    "UserId": "00000000-0000-0000-0000-00000000",
    "FullName": "Person one",
    "Houses": [
      {
        "State": "Colorado",
        "City": "Denver",
        "Code": "C_D",
        "Purchased": True
      },
      {
        "State": "Texas",
        "City": "Austin",
        "Code": "A_D",
        "Purchased": True
      },
    ]
  },
 {
    "UserId": "00000000-0000-0000-0000-00000000",
    "FullName": "Person Two",
    "Houses": [
      {
        "State": "Colorado",
        "City": "Denver",
        "Code": "C_D",
        "Purchased": True
      },
      {
        "State": "Texas",
        "City": "Austin",
        "Code": "A_D",
        "Purchased": False
      },
    ]
  }
]

我的问题是我需要为每个人设置一行，为每个城市设置一列 header。每个 'Houses' 的 object 对每个人来说都是一样的，但我不知道数据是什么，所以我不能自动设置 matColumnDef。

我发现下面的

            <table mat-table [dataSource]="dataSource" [trackBy]="myTrackById" fixedLayout recycleRows>

                <ng-container [matColumnDef]="hb.FullName" *ngFor="let hb of HousingBlocks; let i = index">
                    <th mat-header-cell *matHeaderCellDef> Full Name </th>
                    <td mat-cell *matCellDef> {{hb.FullName}} </td>
                </ng-container>
            
                <ng-container [matColumnDef]="eventApproval.UserName" *ngFor="let hb of HousingBlocks; let i = index">
                    <div *ngFor="let house of hb.Houses[i];let i = index">
                        <th mat-header-cell *matHeaderCellDef> 
                            {{house.City}}
                        </th>
                        <td mat-cell *matCellDef> 
                            {{house.Purchased}}
                        </td>
                    </div>
                </ng-container>

            
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

仅吐出第一次迭代，不会继续嵌套 object，示例

|Full name |Denver|
|----------|------|
|Person One|True  |
|Person Two|True  |

我想要的地方

|Full name  |Denver|Austin|
|-----------|------|------|
|Person One |True  |True  |
|Person Two |True  |False |

如有任何帮助，我们将不胜感激。我使用获取每个不同城市的 foreach 循环自动填充显示的列，因此我没有 id 问题，只是一个填充问题。

谢谢。

Answer 1

查看下面的代码和完整的工作示例here：

HTML

<table mat-table class="text-list" [dataSource]="dataSource">
    <ng-container *ngFor="let column of displayedColumns; let first = first; let i = index" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
      <ng-container *ngIf="first">
        <td mat-cell *matCellDef="let row">{{ row[column] }}</td>
      </ng-container>
      <ng-container *ngIf="!first">
        <td mat-cell *matCellDef="let row">|{{ row.Houses[i-1].Purchased }}</td>
      </ng-container>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

Class

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  data = [
    {
      "UserId": "00000000-0000-0000-0000-00000000",
      "FullName": "Person one",
      "Houses": [
        {
          "State": "Colorado",
          "City": "Denver",
          "Code": "C_D",
          "Purchased": true
        },
        {
          "State": "Texas",
          "City": "Austin",
          "Code": "A_D",
          "Purchased": true
        },
      ]
    },
   {
      "UserId": "00000000-0000-0000-0000-00000000",
      "FullName": "Person Two",
      "Houses": [
        {
          "State": "Colorado",
          "City": "Denver",
          "Code": "C_D",
          "Purchased": true
        },
        {
          "State": "Texas",
          "City": "Austin",
          "Code": "A_D",
          "Purchased": false
        },
      ]
    }
  ];
  displayedColumns = ['FullName', 'Denver', 'Austin'];
  dataSource = new MatTableDataSource<any>([]);

  ngOnInit(): void {
    this.dataSource.data = this.data;
  }

Angular Mat Table with Nested objects

Angular Mat Table with Nested objects

angular

typescript

angular-material

angular-material-table