带有嵌套数据源的Angular Material表 [英] Angular Material table with nested data source

问题描述

我正在mat-table中显示我的JSON文件的数据. mat-table在显示行时工作正常，但我必须在行中显示数组内的数据.但是，我不知道什么是最好的谓词.我尝试在哪里做谓词，但是没有用.

I am showing the data of my JSON file in the mat-table. The mat-table works fine in showing the rows but I have to show the data inside an array in a row. However, I don't know what would be the best predicate to use. I tried where predicate but it didn't work.

数据:

{
  "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和所有地块

Here i can access the parcelId, like above element.parcels[0].parcelId. However, I want to make it repeat so the fname, lname and all the parcels of a particular user can be seen in the table

推荐答案

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

If you know the number of parcels beforehand, and it is a fixed number, you could use ngFor in the HTML template and a for-loop when fetching data, before setting the data source, to fill in the correct number and names of displayed columns. If you don't have this information, you could always use ngFor in the template alone, listing all the data in a cell like this: 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>

这篇关于带有嵌套数据源的Angular Material表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！