Таблица угловых материалов с вложенным источником данных

Question

Я показываю данные моего файла JSON в mat-table.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

Если вы заранее знаете количество посылок и это фиксированное число, вы можете использовать ngFor в шаблоне HTML и цикл 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

Самый простой способ, который я нашел, - это переставить массив и сделать его соответствующим таблице.Таким образом, я также могу добиться сортировки и фильтрации в таблице.