Angular 16中如何根据条件显示material-table的选择列？

要实现Material Table的多选选择列按条件显示，核心是通过Angular的*ngIf指令控制选择列的渲染，同时同步管理表格的显示列数组，确保列结构和视觉显示一致。

1. 模板层实现 #

在表格的选择列定义（matColumnDef="select"）上添加*ngIf，仅当指定条件为真时渲染该列的表头和单元格：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 条件渲染选择列 -->
  <ng-container matColumnDef="select" *ngIf="showSelectionColumn">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox 
        (change)="masterToggle()"
        [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox 
        (click)="$event.stopPropagation()"
        (change)="selection.toggle(row)"
        [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- 其他业务列 -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>序号</th>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>名称</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <!-- 表头与数据行渲染 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

2. 组件逻辑处理 #

在组件中维护条件变量和显示列数组，当条件变化时动态添加/移除选择列，并处理选中状态的一致性：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';

interface TableData {
  position: number;
  name: string;
}

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html',
})
export class TableDemoComponent {
  // 初始显示业务列，不包含选择列
  displayedColumns: string[] = ['position', 'name'];
  dataSource = new MatTableDataSource<TableData>([
    { position: 1, name: '示例数据1' },
    { position: 2, name: '示例数据2' }
  ]);
  selection = new SelectionModel<TableData>(true, []);
  // 控制选择列显示的条件变量，根据业务场景赋值（比如权限、页面状态）
  showSelectionColumn = false;

  // 切换选择列显示状态的示例方法
  updateSelectionColumnVisibility(condition: boolean) {
    this.showSelectionColumn = condition;
    
    if (condition) {
      // 将选择列插入到显示列数组的首位
      if (!this.displayedColumns.includes('select')) {
        this.displayedColumns.unshift('select');
      }
    } else {
      // 移除选择列并清空选中项，避免状态残留
      this.displayedColumns = this.displayedColumns.filter(col => col !== 'select');
      this.selection.clear();
    }

    // 触发表格重新渲染（可选，确保列结构更新生效）
    this.dataSource.data = [...this.dataSource.data];
  }

  // 全选/取消全选逻辑
  isAllSelected() {
    const selectedCount = this.selection.selected.length;
    const totalRows = this.dataSource.data.length;
    return selectedCount === totalRows;
  }

  masterToggle() {
    this.isAllSelected() 
      ? this.selection.clear() 
      : this.dataSource.data.forEach(row => this.selection.select(row));
  }
}

关键注意点 #

• 必须同步更新displayedColumns数组：仅用*ngIf隐藏列元素会导致表格列结构不匹配，必须添加/移除数组中的select项
• 隐藏选择列时清空选中状态：避免用户再次显示列时看到之前的选中记录，保证状态一致性
• 异步条件处理：如果控制条件是异步获取的（比如接口返回的权限信息），要在数据加载完成后再调用列更新方法

内容的提问来源于stack exchange，提问作者robert trudel