Для моей таблицы в Angular у меня есть объект, который содержит массив. Этот массив содержит пары ключ-значение, означающие ключ: column definition
и значение: column value
. column definition
должен быть дополнительным столбцом таблицы, который имеет этот конкретный ключ в качестве заголовка заголовка. Значение должно быть добавлено в ячейку, содержащую пару значений ключа.
Объект:
export class User {
constructor(
public phone: string,
public email: string,
public name: string,
public company: Company,
public optionalProjectHours: any // The array containing f.e.:
// [{"A24": 12}, {"E13", 4}]
) {}
}
Теперь с примерами пар значений ключа A24
и E13
, таблицадолжен содержать два дополнительных столбца с заголовками, а для конкретного пользователя также значения ячеек 12
и 4
.
Так например:
Расширяемая таблица:
<div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company">
<mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
Есть ли способ реализовать эти дополнительные, необязательные столбцы в таблице выше? (с угловой таблицей обозначений)