angular-material - 如何显示和隐藏特定列？

Question

我有一个 mat-table 和 mat-menu:

<mat-menu #menu="matMenu">
  <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Index</span>
      </button>
  <button mat-menu-item>
        <mat-icon>voicemail</mat-icon>
        <span>Created At</span>
      </button>
</mat-menu>

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="index">
    <th mat-header-cell *matHeaderCellDef> Index </th>
    <td mat-cell *matCellDef="let vms"> {{vms.index}} </td>
  </ng-container>

  <ng-container matColumnDef="createdAt">
    <th mat-header-cell *matHeaderCellDef> Created At </th>
    <td mat-cell *matCellDef="let vms">{{vms.vm_created_at}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

我还有一个显示displayedCloumns列表的菜单，我试图在单击菜单时显示和隐藏列。例如index 或 createdAt

组件

displayedColumns = ['index', 'createdAt'];
dataSource;

Angular Material 文档中的示例解释、显示和隐藏随机列并使用 slice 和 push。

我正在尝试在点击时显示和隐藏特定列。

有办法让它发挥作用吗？

Answer 1

我确信有多种方法可以做到这一点，但我看到的一种方法是让每个菜单项的单击事件将关联的列名称传递给执行列隐藏或显示的函数。下面的示例没有对列进行排序(因为使用了 splice 和 push，列隐藏/显示总是发生在表的最后一列)，但添加了额外的逻辑维持特定的顺序不应该有太大的改变。

StackBlitz example