在角物料表中为每个数据源元素呈现多个动态表行

时间:2019-05-13 19:52:06

标签: javascript html angular angular-material

如何在下面的Angular Material Table中将typevalue列定义简化为一个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   
_________________________

0 个答案:

没有答案