我在中显示 JSON 文件的数据mat-table
. The mat-table
显示行效果很好,但我必须连续显示数组内的数据。但是,我不知道最好使用什么谓词。我尝试了 where 谓词但它不起作用。
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 模板:
<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
并且可以在表格中看到某个用户的所有包裹