Angular Material表格媒体查询下隐藏列失效问题求助

我正在使用包含大量列的Angular Material表格，希望在特定CSS媒体查询条件下隐藏部分列。以下是我尝试的代码：

HTML代码 #

<ng-container matColumnDef="Speed">
  <th mat-header-cell *matHeaderCellDef>Speed</th>
  <td mat-cell *matCellDef="let row" class="mat-cell">
    <span class="speed" [ngClass]="{ 'bold': selectedSpeedNames.includes(speed.name) }" *ngFor="let speed of row.speed.$values">{{ speed.name }}</span>
  </td>
</ng-container>

CSS代码 #

@media only screen and (max-width: 768px) and (min-width: 480px) {
  th[mat-header-cell*="Speed"],
  td[mat-cell*="Speed"] {
    display: none !important;
  }
}

尝试通过上述CSS媒体查询在480px-768px的屏幕尺寸下隐藏Speed列，但并未达到预期效果。请问哪里操作有误？有没有更优的实现方案？

错误原因 #

你的CSS选择器写法错误：mat-header-cell和mat-cell是Angular Material的指令，并非HTML属性，不能用属性选择器[mat-header-cell*="Speed"]匹配。实际Angular Material渲染表格时，会给对应列的表头单元格和数据单元格添加cdk-column-{columnName}的类名，比如这里的cdk-column-Speed。

修正后的纯CSS方案 #

直接针对列的专属类名设置隐藏：

@media only screen and (max-width: 768px) and (min-width: 480px) {
  .cdk-column-Speed {
    display: none !important;
  }
}

更优的Angular原生方案（推荐） #

通过动态控制表格的displayedColumns数组实现，比纯CSS更贴合Angular组件逻辑，还能避免不必要的DOM渲染：

1. 组件类中添加列控制逻辑：

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourTableComponent implements OnInit {
  // 初始显示所有需要的列
  displayedColumns: string[] = ['Speed', 'OtherColumn1', 'OtherColumn2'];

  ngOnInit(): void {
    // 初始化时根据当前屏幕宽度调整列
    this.updateDisplayedColumns(window.innerWidth);
  }

  // 监听窗口 resize 事件
  @HostListener('window:resize', ['$event'])
  onWindowResize(event: Event): void {
    this.updateDisplayedColumns((event.target as Window).innerWidth);
  }

  private updateDisplayedColumns(width: number): void {
    // 根据屏幕宽度范围调整显示列
    if (width >= 480 && width <= 768) {
      // 移除Speed列
      this.displayedColumns = this.displayedColumns.filter(col => col !== 'Speed');
    } else {
      // 确保Speed列存在（若之前被移除）
      if (!this.displayedColumns.includes('Speed')) {
        this.displayedColumns.push('Speed');
        // 可根据需求调整列的显示顺序
        const columnOrder = ['OtherColumn1', 'Speed', 'OtherColumn2'];
        this.displayedColumns.sort((a, b) => columnOrder.indexOf(a) - columnOrder.indexOf(b));
      }
    }
  }
}

2. 模板中绑定动态列数组：

<table mat-table [dataSource]="yourDataSource" [displayedColumns]="displayedColumns">
  <!-- Speed列定义 -->
  <ng-container matColumnDef="Speed">
    <th mat-header-cell *matHeaderCellDef>Speed</th>
    <td mat-cell *matCellDef="let row" class="mat-cell">
      <span class="speed" [ngClass]="{ 'bold': selectedSpeedNames.includes(speed.name) }" *ngFor="let speed of row.speed.$values">{{ speed.name }}</span>
    </td>
  </ng-container>

  <!-- 其他列定义 -->
  <ng-container matColumnDef="OtherColumn1">
    <th mat-header-cell *matHeaderCellDef>其他列1</th>
    <td mat-cell *matCellDef="let row">{{ row.otherColumn1 }}</td>
  </ng-container>
  <ng-container matColumnDef="OtherColumn2">
    <th mat-header-cell *matHeaderCellDef>其他列2</th>
    <td mat-cell *matCellDef="let row">{{ row.otherColumn2 }}</td>
  </ng-container>

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

方案对比 #

• 纯CSS方案：简单直接，但DOM元素仍存在，只是视觉隐藏；
• Angular动态列方案：直接从DOM中移除列，性能更优，且能更好地配合表格的排序、筛选等其他逻辑。

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