如何在角材料表中连续显示表标题? [英] How to display the table headers in a row, in angular material table?

问题描述

我的材料表以下列方式显示值:

名称 |数量

芒果|10

 
<div class="mat-elevation-z8 height-scroll-control"><table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements"><!-- 名称列--><ng-container matColumnDef="name"><td mat-h​​eader-cell *matHeaderCellDef >名称</td><td mat-cell *matCellDef="let row" class=""><div class="cell-style padding-left">{{row.Name}}</div></td></ng-容器><!-- 数量栏--><ng-container matColumnDef="数量"><td mat-h​​eader-cell *matHeaderCellDef>数量</td><td mat-cell *matCellDef="let row"><div class="cell-style">{{row.quantity}}</div></td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="让行；列:displayColumns;"></tr>

但我想显示如下值:

姓名 |芒果

数量 |10

我怎样才能做到这一点?非常感谢任何帮助

解决方案

你可以这样做:

1. 将数据从列转换为行:

   之前:芒果|10香蕉|5

   之后:芒果|香蕉10|5

2. 包括标签作为数据的第一列:

   名称|芒果|香蕉数量|10|5

3. 调整您的表格以动态显示列(以便您可以拥有任意数量的列)，如 角度材料表文档:

<ng-container [matColumnDef]="column" *ngFor="let 列的显示列"><th mat-h​​eader-cell *matHeaderCellDef>{{column}} </th><td mat-cell *matCellDef="let element">{{元素[列]}} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="columnsToDisplay"></tr><tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>

4. 如果不需要，您可以删除标题行

5. 如果你想格式化第一列，你可以使用一些css:

   td.mat-cell:nth-child(1) {//格式化}

6. 此外，如果需要，您可以使用 MatColumnDef 的属性 sticky 来保持第一列的粘性(在这种情况下，您可能希望将第一列与动态 *ngFor 循环分开，以便您可以轻松地只有第一列粘)

我创建了一个有效的 stackblitz 示例

My Material table displays the value in below manner:

Name |quatity

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

But I want to display the value like below:

Name | Mango

quatity | 10

How can I achieve this? any help is much appreciated

解决方案

You may do that by:

1. Transposing your data from columns to row:

   Before: Mango |10 Banana|5

   After: Mango|Banana 10|5

2. Including the labels as the first column of your data:

   Name|Mango|Banana Quantity|10|5

3. Adjust your table to display columns dynamically (so that you may have any number of columns), as on this example from angular material table documentation:

<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. If not required you may remove the header row

5. If you want to format the first column, you may use some css as:

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

6. Also, if required, you may use property sticky of MatColumnDef to keep the first column sticky (in this case you may want to have the first column separate from the dynamic *ngFor loop, so that you may easily have only the first column sticky)

I've created a working stackblitz example

这篇关于如何在角材料表中连续显示表标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！