如何配置ng-select：选中特定值时禁止选择其他选项

需求回顾 #

当选中特定值（例如x）后，禁止选择其他选项；若要选择其他选项，必须先清除该特定值。

代码修改方案 #

1. 模板部分调整

拆分双向绑定以监听选中值变化，给ng-option添加禁用判断逻辑：

<ng-select [hideSelected]="true" [loading]="isLoading" [multiple]="true"
           [ngModel]="ids" (ngModelChange)="onIdsChange($event)" 
           [closeOnSelect]="false" #selectedNames="ngModel" required
           placeholder="{{'Names' | translate}}" [clearable]="true">
  <ng-container *ngFor="let name of names">
    <ng-option [value]="name.Value" [disabled]="isOptionDisabled(name)">
      {{name.Label}}
    </ng-option>
  </ng-container>
</ng-select>

注意：替换name.Value为你实际数据中对应选项值的字段名，确保和ids存储的类型匹配。

2. 组件逻辑实现

在组件类中添加选中值处理和选项禁用判断逻辑：

import { Component } from '@angular/core';

@Component({
  // 保留你原有组件的元数据配置
})
export class YourComponent {
  ids: any[] = [];
  names: any[] = []; // 你的选项列表数据源
  isLoading = false;
  
  // 定义需要特殊处理的特定值，按需修改
  private readonly SPECIAL_VALUE = 'x';

  onIdsChange(newIds: any[]) {
    const hasSpecialValue = newIds.includes(this.SPECIAL_VALUE);
    if (hasSpecialValue) {
      // 选中特定值时，自动移除其他已选选项，仅保留特定值
      this.ids = [this.SPECIAL_VALUE];
    } else {
      this.ids = newIds;
    }
  }

  isOptionDisabled(name: any): boolean {
    // 已选中特定值时，禁用所有非特定值的选项
    return this.ids.includes(this.SPECIAL_VALUE) && name.Value !== this.SPECIAL_VALUE;
  }
}

逻辑说明 #

• 选项禁用：当ids包含特定值x时，所有非x的选项会被禁用，用户无法选择；
• 选中值修正：如果用户先选其他选项再选x，会自动清除其他已选项，确保仅保留x；
• 恢复可选：用户清除x后，所有选项自动恢复可用，可正常进行多选操作。

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