Angular mat-select中已选中的mat-option如何设置为禁用无法取消选择？

方案1：禁用已选中选项（推荐） #

该方案不会打乱下拉选项的排列顺序，用户可以在下拉列表中直观看到已选内容，同时无法点击取消，完全匹配需求。
修改后的代码如下：

<!-- 组件模板代码 -->
<mat-select [(ngModel)]="selectedBrands" [ngModelOptions]="{standalone: true}" required multiple>
  <!-- 存在已选值时禁用None选项，避免清空已选内容 -->
  <mat-option [disabled]="selectedBrands.length > 0">None</mat-option>
  <mat-option 
    *ngFor="let brand of brands" 
    [value]="brand"
    [disabled]="isSelected(brand)"
  >
    {{brand.name}}
  </mat-option>
</mat-select>

在对应组件类中添加判断方法，解决对象引用对比失效的问题：

// 组件类代码
selectedBrands: any[] = [];
brands = []; // 你的品牌源数据

isSelected(brand: any): boolean {
  // 使用数据唯一标识（如id）判断是否已选中，不要直接用includes对比对象引用
  return this.selectedBrands.some(selected => selected.id === brand.id);
}

方案2：隐藏/移除已选中选项 #

如果你不需要在下拉列表中展示已经选中的选项，可以用*ngIf直接过滤已选内容：

<mat-select [(ngModel)]="selectedBrands" [ngModelOptions]="{standalone: true}" required multiple>
  <mat-option *ngIf="selectedBrands.length === 0">None</mat-option>
  <!-- 用ng-container包裹ngFor，避免同元素同时使用两个结构型指令报错 -->
  <ng-container *ngFor="let brand of brands">
    <mat-option 
      [value]="brand"
      *ngIf="!isSelected(brand)"
    >
      {{brand.name}}
    </mat-option>
  </ng-container>
</mat-select>

该方案的下拉列表只会展示未选中的选项，用户只能选择新选项，完全无法操作已选内容。

注意事项 #

• 如果你的选项value是字符串、数字等基础类型，可以直接用selectedBrands.includes(brand)代替自定义的isSelected方法，不需要额外写判断函数。
• 两种方案都默认在存在已选值时禁用/隐藏了None选项，避免用户点击None清空所有已选内容，符合“无法取消已经选中的选项”的需求。

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