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

我有一个带有

垫菜单的
垫表
：


通知关闭
指数
语音信箱
创建于
指数
{{vms.index}
创建于
{{vms.vm_在}创建}

我还有一个菜单，显示
displayedCloumns
，我试图在单击菜单时显示和隐藏列。例如
索引
或
创建数据

组件

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

角度材质文档中的示例解释、显示和隐藏随机列，并使用
切片
和
推送

我试图
在单击时显示
和
隐藏
特定列

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

您可以在视图中使用一组切换按钮，并使用其值指向如下列：

<mat-button-toggle-group [multiple]="true" group="matButtonToggleGroup">
  <mat-button-toggle value="colname">
    <span>button name</span>
  </mat-button-toggle>
       .......
</mat-button-toggle-group>

参见工作示例
我使用的一个解决方案是创建一个remove函数，该函数可以对每个列重复使用

my.component.ts

displayedColumns: string[] = ['thatParticularColumn'];
columnsToDisplay: string[] = this.displayedColumns.slice();

removeThatParticularColumn() {
 this.remove('thatParticularColumn');
}

remove(ele: string) {
 let index = this.columnsToDisplay.indexOf(ele);
 if (index > -1) {
    this.columnsToDisplay.splice(index, 1);
 }
}

my.component.html

<mat-table>
   </ng-container matColumnDef="thatParticularColumn">
      ...
   </ng-container>
   <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
   <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
<mat-table>

<button mat-button (click)="removeThatParticularColumn()"> Hide That Particular Column </button>


...
隐藏特定列

注意：别忘了导入正确的模块。
几周前我也在尝试导入相同的模块！有什么解决办法吗？你有没有看一下我发布的StackBlitz示例，看看这是否对你有帮助？
<mat-table>
   </ng-container matColumnDef="thatParticularColumn">
      ...
   </ng-container>
   <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
   <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
<mat-table>

<button mat-button (click)="removeThatParticularColumn()"> Hide That Particular Column </button>