使用Angular?显示/隐藏mat-table列

Question

我目前有一个从mat-table中删除列的函数。这非常有效，尽管当我要将列添加回表中时，因为列索引没有保留。有没有办法在重新添加列时保持列的顺序？或者甚至是更好的方式来做这件事？！

谢谢

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>

Answer 1

您可以使用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);
  }

超文本标记语言：在表中添加<mat-row>

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

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