我正在使用Angular 5和Angular Material数据表来构建数据 . 我在下面的网站上提到了一个例子 . 在此考虑我需要将动态数据包含到每一行,如屏幕截图所示,'favorite'是列 Headers .
http://www.devglan.com/angular/angular-data-table-example
样品Json用于交叉参考 .
constELEMENT_DATA: Element[
]=[
{
position: 1,
firstName: 'John',
lastName: 'Doe',
email: 'john@gmail.com'favoriteColor: 'red',
favorite: {
favoriteFood: [
'Idly',
'Vada'
],
favoriteCar: 'Mercendes Benz',
favoriteMovie: 'JamesBond movie',
favoritePlace: 'HillStation'
}
},
{
position: 1,
firstName: 'Mike',
lastName: 'Hussey',
email: 'mike@gmail.com',
favorite: {
favoriteFood: 'Dosa',
favoriteMovie: 'RajiniKandth movie'
}
},
{
position: 1,
firstName: 'Ricky',
lastName: 'Hans',
email: 'ricky@gmail.com',
favorite: {
favoriteFood: 'Chappathi',
favoriteCar: 'BMW'
}
},
{
position: 1,
firstName: 'Martin',
lastName: 'Kos',
email: 'martin@gmail.com'favorite: {
}
},
{
position: 1,
firstName: 'Tom',
lastName: 'Paisa',
email: 'tom@gmail.com',
favorite: {
favoriteCar: 'Ford'
}
}
];
HTML:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="firstName">
<mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="lastName">
<mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
<mat-cell *matCellDef="let element"> <mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
我的错误是我无法在屏幕截图中正确捕获输出 . 如果你认为约翰的名字是第一行,Food:Idly,Vada将出现在那一行,但下一行将有Car:Mercendes Benz,下一行将有电影JamesBond电影和下一行地点:HillStation . 属于这些行的所有其他列将为空 . 下一次迭代将以类似的方式开始名字Ricky . 在Json考虑所有这些最喜欢的项目是最喜欢的 .
1 回答
只需在HTML中使用循环即可 .
Stackblitz