时间戳

首页 > 解决方案 > 如何在角度材料表中连续显示表头？

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

解决方案

你可以这样做：

  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 示例

推荐阅读