如何在Angular 6中隐藏动态材料表中的列？

<!-- 组件的HTML模板 -->
<mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.name">
    <mat-header-cell *matHeaderCellDef>{{ column.label }}</mat-header-cell>
    <mat-cell *matCellDef="let element" *ngIf="columnVisibility[column.name]">{{ element[column.name] }}</mat-cell>
  </ng-container>

  <!-- 列标题 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <!-- 行数据 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<!-- 列可见性切换按钮 -->
<div *ngFor="let column of columns">
  <mat-checkbox [(ngModel)]="columnVisibility[column.name]" (change)="toggleColumnVisibility(column.name)">{{ column.label }}</mat-checkbox>
</div>

// 组件的Typescript文件
export class YourComponent {
  dataSource: MatTableDataSource<any>;
  columns: any[] = [
    { name: 'column1', label: 'Column 1' },
    { name: 'column2', label: 'Column 2' },
    { name: 'column3', label: 'Column 3' }
  ];
  displayedColumns: string[] = this.columns.map(column => column.name);
  columnVisibility: { [key: string]: boolean } = {};

  constructor() {
    this.dataSource = new MatTableDataSource<any>(/* your data source */);
    this.columns.forEach(column => {
      this.columnVisibility[column.name] = true; // 默认所有列可见
    });
  }

  toggleColumnVisibility(columnName: string) {
    this.columnVisibility[columnName] = !this.columnVisibility[columnName];
  }
}