具有嵌套数据源的 Angular Material 表

Question

我正在显示 .json 文件中的数据mat-table。显示行的效果mat-table很好，但我必须连续显示数组内的数据。但是，我不知道最好使用什么谓词。我尝试了 where 谓词但它不起作用。

数据：

{
  "fname": "Mark",
  "lname": "jhony",
  "parcels": [
    {
      "parcelId": 123,
      "parcelName: "asd",
      "parcelItems": [
        { 
          "itemId": 2,
          "itemName": "perfume"
        },
        { 
          "itemId": 4,
          "itemName": "soap"
        }
      ]
    },
    {
      "parcelId": 144,
      "parcelName": "parcel2",
      "parcelItems": [
        { 
          "itemId": 2,
          "itemName": "headphones"
        },
        { 
          "itemId": 4,
          "itemName": "mouse"
        }
      ]
    }
  ]
}

HTML 模板：

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="fname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Fname </th>
    <td mat-cell *matCellDef="let element"> {{element.fname}} </td>
  </ng-container>
  <ng-container matColumnDef="lname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Lname </th>
    <td mat-cell *matCellDef="let row"> {{row.lname}} </td>
  </ng-container>
  <ng-container matColumnDef="parcelid">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Parcelid </th>
    <td mat-cell *matCellDef="let element"> {{element.parcels[0].parcelId}} </td>

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

在这里我可以访问parcelId，就像上面一样element.parcels[0].parcelId。但是，我想让它重复fname，以便lname可以在表中看到特定用户的 、 和所有包裹

Answer 1

如果你事先知道地块的数量，而且是一个固定的数字，你可以在HTML模板中使用ngFor，在获取数据时使用for循环，在设置数据源之前，填写正确的显示列数和名称。如果您没有此信息，您始终可以单独在模板中使用 ngFor，列出单元格中的所有数据，如下所示：https ://stackblitz.com/edit/nested-table-data

<ng-container matColumnDef="parcels">
    <mat-header-cell *matHeaderCellDef> Parcels </mat-header-cell>
    <mat-cell *matCellDef="let element">
        <div class="parcels">
            <ng-container *ngFor="let parcel of element.parcels">
                <div class="parcel">
                    <ul>
                        <li>ID: {{parcel.parcelId}}</li>
                        <li>Name: {{parcel.parcelName}}</li>
                    </ul>
                    <ul>
                        <li *ngFor="let item of parcel.parcelItems">
                            <span>{{item.itemId}}: {{item.itemName}}</span>
                        </li>
                    </ul>
                </div>
            </ng-container>
        </div>
    </mat-cell>
</ng-container>