问题
I am trying to map one of my object to mat-table
.
Input object from Web API is as follows:
[
{
"inventoryId": 1004,
"inventoryName": "Red Shirt Material",
"dateReport": [
{
"date": "2019-03-04T19:15:16.828",
"quantity": 109.9
},
{
"date": "2019-03-09T10:36:12.198",
"quantity": 26.6
}
]
},
{
"inventoryId": 1003,
"inventoryName": "Blue Pant Material",
"dateReport": [
{
"date": "2019-03-04T19:15:16.828",
"quantity": 64.4
},
{
"date": "2019-03-09T10:36:12.198",
"quantity": 8
}
]
}
]
HTML code
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="sn">
<th mat-header-cell *matHeaderCellDef mat-sort-header>S.No.</th>
<td mat-cell *matCellDef="let row; let i = index">{{ i + 1 }}</td>
</ng-container>
<ng-container matColumnDef="InventoryName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.inventoryName }}</td>
</ng-container>
<ng-template *ngFor="let row;let item of row?.dateReport" >
<ng-container matColumnDef={{ item.date | date }}>
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ item.date | date }}</th>
<td mat-cell *matCellDef="let srow">{{ item.quantity}}</td>
</ng-container>
</ng-template>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
Angular Model:
export class ShoppingListModel {
inventoryId: number;
inventoryName: string;
dateReport: ShoppingListDateModel[] = [];
}
export class ShoppingListDateModel {
date: Date;
quantity: number;
}
Angular Code:
export class ShoppingListComponent implements OnInit {
dataSource: MatTableDataSource<ShoppingListModel>;
displayedColumns = [
'InventoryName',
'Quantity',
'InStock',
// 'Diff',
'UnitId'
];
constructor(
private reportService: ReportService
) {
}
Search() {
this.rService.getShoppingListReport(this.Params).subscribe(
data => {
this.dataSource = new MatTableDataSource(data);
});
}
Expected Output: The dateReport contains the date which is used as column names in the table. 'n' the below structure denotes that webapi may return more than 2 ShoppingListDateModel in which case the column should be added for each date
________________________________________________________________
| S.No | Name | 04-03-2019 | 09-03-2019 | .....n |
|______________________________________________________________|
| | | | | |
| 1 | Red Shirt Material | 109.9 | 26.6 | .....n |
| | | | | |
| 2 | Blue Pant Material | 64.4 | 8 | .....n |
|______________________________________________________________|
Problem:
Unable to generate column based on the dateRecord. The UI only renders only first two columns.
I am new to Angular. In case my execution is wrong kindly let me know and I can modify it based on input.
回答1:
This is probably due to the fact that dataSource
is undefined on the init of your component. You just specified a type for it. So one of the ways to go is to do a
dataSource = new ShoppingListModel(... default data)
then it won't be undefined.
Another way to go is to add *ngFor="let row;let item of row?.dateReport"
the ?
will not throw an error if the row
is undefined.
来源:https://stackoverflow.com/questions/55150964/angular-7-mapping-object-with-array-of-object-to-mat-table