javascript - 在 Angular 材质表中为每个数据源元素渲染多个动态表行

Question

如何在下面的 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   
_________________________

标签： javascripthtmlangularangular-material