Рендеринг нескольких строк динамической таблицы на элемент источника данных в угловой таблице материалов - PullRequest
1 голос
/ 13 мая 2019

Как в приведенной ниже таблице угловых материалов можно уменьшить определения столбцов 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   
_________________________
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...