Свести ваши массивы.
ользую таблицу данных Angular 5 и Angular Material для создания данных. Я имею в виду пример на сайте ниже. В этой связи мне нужно включить динамические данные в каждую строку, как на скриншоте, где «favourite» - заголовок столбца.
http://www.devglan.com/angular/angular-data-table-example
Образец Json для перекрестной ссылки.
constELEMENT_DATA: Element[
]=[
{
position: 1,
firstName: 'John',
lastName: 'Doe',
email: '[email protected]'favoriteColor: 'red',
favorite: {
favoriteFood: [
'Idly',
'Vada'
],
favoriteCar: 'Mercendes Benz',
favoriteMovie: 'JamesBond movie',
favoritePlace: 'HillStation'
}
},
{
position: 1,
firstName: 'Mike',
lastName: 'Hussey',
email: '[email protected]',
favorite: {
favoriteFood: 'Dosa',
favoriteMovie: 'RajiniKandth movie'
}
},
{
position: 1,
firstName: 'Ricky',
lastName: 'Hans',
email: '[email protected]',
favorite: {
favoriteFood: 'Chappathi',
favoriteCar: 'BMW'
}
},
{
position: 1,
firstName: 'Martin',
lastName: 'Kos',
email: '[email protected]'favorite: {
}
},
{
position: 1,
firstName: 'Tom',
lastName: 'Paisa',
email: '[email protected]',
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. где все остальные столбцы, принадлежащие этим строкам, будут пустыми. Следующая итерация начнется для имени Рики аналогичным образом. В Json рассмотрим все эти любимые предметы, находящиеся под любимым.