Question

我正在mat-table中显示我的JSON文件的数据。 mat-table在显示行时效果很好，但是我必须在行中显示数组中的数据。但是，我不知道什么是最好的谓词。我尝试了谓词，但没有用。

数据：

{
  "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>

Answer 2

我找到的最简单的方法是重新排列数组并使它相应于表。这样我也可以在表中实现排序和过滤。

带有嵌套数据源的Angular Material表

2 个答案: