Angular Material 如何隐藏mat-select中已禁用的下拉选项

方案1：预过滤数据源（最优方案） #

直接在渲染前把无权限的用户从渲染列表中剔除，从根源上避免无权限选项被渲染，不会产生任何空白占位问题。
你可以在组件的ts文件中新增过滤后的用户列表属性：

// 组件ts文件新增逻辑
allowedUsers = this.users.filter(user => user.permission !== 'N');

然后修改HTML中的遍历逻辑，直接使用过滤后的列表即可：

<div class="material-input">
  <mat-form-field class="form-group-select">
    <mat-label>User name</mat-label>
    <mat-select class="select" placeholder="User names"
      formControlName="user">
      <mat-option  *ngFor="let user of allowedUsers"
        [value]="user.id">
        {{user.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

如果你的用户列表是动态更新的，把过滤逻辑写在用户列表赋值的位置，或者用计算属性实现实时过滤即可。

方案2：CSS强制隐藏（适合必须保留无权限选项DOM的特殊场景） #

之前的样式不生效是因为没有清除mat-option自带的默认内边距、行高样式，同时mat-select的下拉面板默认脱离当前组件样式作用域，需要用穿透样式处理：
在组件的样式文件中添加如下规则：

::ng-deep mat-option[disabled] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

你的原有HTML代码不需要修改，该样式会自动隐藏所有被禁用的mat-option，且不会残留空白区域。

优先使用方案1，性能更高、逻辑更清晰，不会产生额外的样式污染问题。

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