Как отобразить заголовки таблицы подряд, в таблице угловых материалов?

Question

Моя таблица материалов отображает значение следующим образом:

Имя | качество

Манго |10

    <div class="table-cover center-table">
      <div class="mat-elevation-z8 elevation-scroll-control">
        <table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements">

          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <td mat-header-cell *matHeaderCellDef >Name</td>
            <td mat-cell *matCellDef="let row" class="">
              <div class="cell-style padding-left">{{row.Name}}</div>
            </td>
          </ng-container>

          <!-- quantity Column -->
          <ng-container matColumnDef="quantity">
            <td mat-header-cell *matHeaderCellDef>quantity</td>
            <td mat-cell *matCellDef="let row">
              <div class="cell-style">{{row.quantity}}</div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"> </tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"> </tr>
        </table>

      </div>      
    </div>

Но я хочу отобразить значение, как показано ниже:

Имя | манго

качество |10

Как мне этого добиться? Любая помощь высоко ценится

Answer 1

Вы можете сделать это:

1. Транспонирование ваших данных из столбцов в строку:

   Before: Mango |10 Banana|5

   After: Mango|Banana 10|5

2. Включая метки в качестве первого столбца ваших данных:

   Name|Mango|Banana Quantity|10|5

3. Настройте таблицу так, чтобы столбцы отображались динамически (чтобы у вас могло быть любое количество столбцов), как в этом примере из документации таблицы угловых материалов:

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

4. Если не требуется, вы можете удалить строку заголовка

5. Если вы хотите отформатировать первый столбец, вы можете использовать некоторые CSS:

   td.mat-cell:nth-child(1) { // formatting }

6. Кроме того, если требуется, вы можете использовать свойство sticky для MatColumnDef, чтобы сохранить привязку первого столбца (в этом случае вы можете захотеть, чтобы первый столбец был отделен от динамического цикла *ngFor, так что вы можете легко иметь только первый столбец закрепления)

Я создал рабочий пример стекаблица