Angular Material 动态生成表格按传入ID隐藏列的实现问题

实现方案 #

你可以通过「全量列定义+ID对应隐藏规则映射+动态过滤返回展示列」的逻辑实现需求，具体修改如下：

1. 组件类逻辑修改 #

首先在组件中定义全量列列表、列隐藏规则，再通过页面传入的ID计算要展示的列数组：

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件配置
})
export class YourComponent implements OnInit {
  // 定义所有可能需要展示的全量列
  allColumns: string[] = ['id', 'name', 'age', 'email', 'operation'];
  // 最终渲染用的展示列数组
  displayedColumns: string[] = [];
  // 配置不同ID对应的需要隐藏的列，可根据业务需求自行调整规则
  hideRule: Record<number, string[]> = {
    // 示例：ID为1时隐藏年龄、操作列
    1: ['age', 'operation'],
    // 示例：ID为2时隐藏邮箱列
    2: ['email'],
    // 示例：ID为3时展示所有列
    3: []
  };

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 获取页面传入的ID，这里以路由query参数为例，如果是路由路径参数/父组件传入的@Input可自行调整取值逻辑
    const targetId = Number(this.route.snapshot.queryParamMap.get('id'));
    // 初始化展示列
    this.displayedColumns = this.getDisplayedColumns(targetId);
  }

  getDisplayedColumns(targetId?: number): string[] {
    // 适配模板调用场景，无ID参数时直接返回已计算好的展示列
    if (!targetId) return this.displayedColumns;
    // 拿到对应ID需要隐藏的列，无匹配规则时默认不隐藏任何列
    const needHideColumns = this.hideRule[targetId] || [];
    // 过滤掉需要隐藏的列返回结果
    return this.allColumns.filter(col => !needHideColumns.includes(col));
  }
}

2. 模板代码调整 #

你当前的模板中表头行、数据行、列循环绑定的数据源不一致，会导致渲染报错，统一绑定displayedColumns即可：

<table mat-table [dataSource]="dataSource" align="center" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th  mat-header-cell *matHeaderCellDef > {{column}} </th>
    <td  mat-cell *matCellDef="let element" > {{element[column]}} </td>
  </ng-container>
  <tr  mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
  <tr  mat-row *matRowDef="let row; columns: displayedColumns;" ></tr>
</table>

注意事项 #

如果页面ID会动态变化（无页面刷新的场景），可以改为订阅路由参数变化，每次ID更新时重新调用getDisplayedColumns计算displayedColumns的值即可自动刷新表格列。

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