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

问题描述

我在 mat-table 中显示了我的 JSON 文件的数据.mat-table 可以很好地显示行，但我必须连续显示数组中的数据.但是，我不知道什么是最好的谓词使用.我试过 where 谓词，但没有用.

数据:

{"fname": "标记","lname": "jhony",包裹":[{包裹ID":123，"包裹名称:"asd",包裹物品":[{"itemId": 2,"itemName": "香水"},{"itemId": 4,"itemName": "肥皂"}]},{包裹ID":144，"parcelName": "parcel2",包裹物品":[{"itemId": 2,"itemName": "耳机"},{"itemId": 4,"itemName": "鼠标"}]}]}

HTML 模板:

<ng-container matColumnDef="fname"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>Fname </th><td mat-cell *matCellDef="let element">{{element.fname}} </td></ng-容器><ng-container matColumnDef="lname"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>Lname </th><td mat-cell *matCellDef="let row">{{row.lname}} </td></ng-容器><ng-container matColumnDef="parcelid"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>Parcelid </th><td mat-cell *matCellDef="let element">{{element.parcels[0].parcelId}} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row;columns:displayedColumns;"></tr>

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

解决方案

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

 <mat-h​​eader-cell *matHeaderCellDef>包裹</mat-h​​eader-cell><mat-cell *matCellDef="let element"><div class="parcels"><ng-container *ngFor="let parcel of element.parcels"><div class="包裹"><ul><li>ID:{{parcel.parcelId}}</li><li>名称:{{parcel.parcelName}}</li><ul><li *ngFor="let item of parcel.parcelItems"><span>{{item.itemId}}:{{item.itemName}}</span>

</ng-容器>

</mat-cell>

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.

Data:

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

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

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

解决方案

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屋！