时间戳

首页 > 解决方案 > 使用Angular显示/隐藏垫表列？

html - 使用Angular显示/隐藏垫表列？

问题描述

我目前有一个从垫表中删除列的功能。这非常有效，尽管当我将列添加回表中时，因为没有保留列索引。重新添加列时有什么方法可以保留列顺序？或者甚至可能有更好的方法来做到这一点？！

谢谢

component.ts

  dataSource : DataSource;
  displayedColumns = [
    "COLUMN1",
    "COLUMN2",
  ];

  columnClick(colName: string) {
    const colIndex = this.displayedColumns.findIndex(col => col === colName);
    
    if (colIndex >= 0) {
      this.displayedColumns.splice(colIndex, 1);
    } else {
      this.displayedColumns.push(colName);
    }
  }

component.html

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="columnClick('COLUMN1')">
    <mat-icon></mat-icon>
    <span>COLUMN1/span>
  </button>
  <button mat-menu-item (click)="columnClick('COLUMN2')">
    <mat-icon></mat-icon>
    <span>COLUMN2</span>
  </button>
</mat-menu>

<div class='table-container'>
    <mat-table mat-table [dataSource]="dataSource" matSort class="results">

      <ng-container matColumnDef="COLUMN1">
        <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>COLUMN1</mat-header-cell>
        <mat-cell *matCellDef="let row" >
          <span>{{row.COLUMN1}}</span>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="COLUMN2">
        <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>COLUMN2</mat-header-cell>
        <mat-cell *matCellDef="let row" >{{row.COLUMN2}}</mat-cell>
      </ng-container>
    </mat-table>
</div>

标签： htmlangular

解决方案

您可以使用columnDefinitions和hide属性来实现。
TS：组件内的代码。

 columnDefinitions = [
    { def: 'id', label: 'ID', hide: this.id.value},
    { def: 'description', label: 'Description', hide: false}
  ]

  getDisplayedColumns():string[] {
    return this.columnDefinitions.filter(cd=>!cd.hide).map(cd=>cd.def);
  }

HTML： 添加<mat-row>到您的表格中

<mat-row *matRowDef="let row; columns: getDisplayedColumns()"></mat-row>

注意：完整的演示代码可在Stackblitz Demo中找到。

推荐阅读