如何在下面的Angular Material Table中将type
和value
列定义简化为一个ng-container
,以便第一行仍呈现info.type
,第二行行仍然呈现info.value
?
角材料表:
<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
<!-- table definition -->
<ng-container matColumnDef="placeholder">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef></td>
<ng-container>
<ng-container matColumnDef="itemHeader">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let index = dataIndex" colspan="2">Item {{index + 1}}</td>
<ng-container>
<ng-container matColumnDef="typeLabel">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef>Type</td>
<ng-container>
<ng-container matColumnDef="valueLabel">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef>Value</td>
<ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Current Value</th>
<td mat-cell *matCellDef="let item">{{item.type}}</td>
<ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef>Current Value</th>
<td mat-cell *matCellDef="let item">{{item.value}}</td>
<ng-container>
<!-- table markup -->
<tr mat-header-row *matHeaderRowDef="['placeholder', 'value']"></tr>
<tr mat-row *matRowDef="let item; columns: ['itemHeader']"></tr>
<tr mat-row *matRowDef="let item; columns: ['typeLabel', 'type']"></tr>
<tr mat-row *matRowDef="let item; columns: ['valueLabel', 'value']"></tr>
</table>
dataSource
:
let dataSource: any[] = [
{
type: 'A',
value: '123'
},
{
type: 'B',
value: '456'
}
]
仅供参考,表格呈现(正确)如下:
_________________________
Current Value
_________________________
Item 1
Type A
Value 123
_________________________
Item 2
Type B
Value 456
_________________________