web-dev-qa-db-ja.com

angularマテリアルテーブルで、テーブルヘッダーを行に表示する方法は？

私のマテリアルテーブルは以下の方法で値を表示します：

名前|品質

マンゴー| 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

どうすればこれを達成できますか？どんな助けでも大歓迎です

angularangular-materialangular7
3
Rajath

あなたはそれをするかもしれません：

  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>
_

  1. 不要な場合は、ヘッダー行を削除できます

  2. 最初の列をフォーマットする場合は、次のようにいくつかのcssを使用できます。

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

  3. また、必要に応じて、MatColumnDefのプロパティstickyを使用して、最初の列をスティッキーに保つことができます（この場合、最初の列を動的* ngForループから分離して、最初の列のみを簡単にスティッキーにすることができます）

動作するものを作成しました stackblitzの例

2
GCSDC