如何在mat-select的aria-expanded为false时隐藏「取消全选」选项？

这里提供几种简便的实现方案，根据需求选择即可：

方案一：CSS属性选择器（最简便） #

给「取消全选」的mat-option添加唯一标识，再利用mat-select的aria-expanded属性状态控制隐藏：

1. 模板中给目标选项加id：

<mat-select>
  <mat-option value="select-all">全选</mat-option>
  <mat-option id="unselect-option" value="unselect-all">取消全选</mat-option>
  <!-- 其他业务选项 -->
</mat-select>

2. 组件样式中添加规则：

/* 当mat-select处于关闭状态时，隐藏取消全选选项 */
mat-select[aria-expanded="false"] mat-option#unselect-option {
  display: none;
}

方案二：利用Angular组件状态控制渲染 #

通过ViewChild获取MatSelect实例，用其panelOpen属性（与aria-expanded状态对应）结合*ngIf控制选项是否渲染：

1. 组件类中获取MatSelect实例：

import { ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

export class YourComponent {
  @ViewChild(MatSelect) selectInstance!: MatSelect;
}

2. 模板中用*ngIf控制选项显示：

<mat-select>
  <mat-option value="select-all">全选</mat-option>
  <!-- 仅当面板展开时显示取消全选选项 -->
  <mat-option *ngIf="selectInstance?.panelOpen" value="unselect-all">取消全选</mat-option>
  <!-- 其他业务选项 -->
</mat-select>

方案三：自定义触发器显示内容（若触发区域显示异常） #

如果mat-select关闭后，触发区域错误显示「取消全选」文本，可通过mat-select-trigger自定义显示逻辑：

<mat-select [(value)]="selectedValue">
  <mat-select-trigger>
    <!-- 选中取消全选且面板关闭时，不显示该文本 -->
    <span *ngIf="selectedValue !== 'unselect-all' || selectInstance?.panelOpen">
      {{ selectedValue === 'select-all' ? '全选' : selectedValue }}
    </span>
  </mat-select-trigger>
  <mat-option value="select-all">全选</mat-option>
  <mat-option value="unselect-all">取消全选</mat-option>
  <!-- 其他业务选项 -->
</mat-select>

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