Angular中ng-select全选时动态添加ng-option-selected及锁定选项问题

1. 模板调整 #

修改ng-select模板，添加自定义选项模板来控制选中样式和禁用状态，同时更新全选按钮的显示文本：

<ng-select
  placeholder="Type *"
  formControlName="types"
  [multiple]="true"
  [closeOnSelect]="false"
  [items]="availableTypes"
  bindValue="name"
  bindLabel="name"
  [selectableGroup]="true"
  [selectableGroupAsModel]="false"
>
  <ng-template ng-header-tmp>
    <div class="select-all-option" (click)="onSelectAllOption()">
      {{ selectAllTypes ? '取消全选' : '全选' }}
    </div>
  </ng-template>
  <!-- 自定义选项模板，控制选中类和禁用状态 -->
  <ng-template ng-option-tmp let-item="item" let-selected="selected">
    <div 
      class="ng-option" 
      [class.ng-option-selected]="selectAllTypes || selected" 
      [class.ng-option-disabled]="selectAllTypes"
    >
      {{ item.name }}
    </div>
  </ng-template>
</ng-select>

2. 组件逻辑修改 #

修正onSelectAllOption方法，正确设置表单值为所有选项的实际值，同时切换全选状态：

selectAllTypes = false;

onSelectAllOption() {
  this.selectAllTypes = !this.selectAllTypes;
  const typesControl = this.filterForm.get('types');
  
  if (this.selectAllTypes) {
    // 全选时把所有选项的name值存入表单
    const allValues = this.availableTypes.map(type => type.name);
    typesControl.setValue(allValues);
  } else {
    // 取消全选时清空表单
    typesControl.setValue([]);
  }
}

3. 兜底处理：防止全选状态下的意外修改 #

添加change事件监听，确保全选状态下无法单独修改选项：

<ng-select
  <!-- 保留原有属性 -->
  (change)="onSelectChange()"
>
  <!-- 模板内容 -->
</ng-select>

onSelectChange() {
  if (this.selectAllTypes) {
    // 重置为全选状态的表单值
    const allValues = this.availableTypes.map(type => type.name);
    this.filterForm.get('types').setValue(allValues);
  }
}

核心说明 #

• 通过自定义选项模板，用selectAllTypes状态直接控制ng-option-selected类，实现全选时所有选项显示勾选样式。
• 全选状态下给选项添加ng-option-disabled类，禁止单独点击操作，配合change事件兜底避免意外修改。
• 全选时表单值设置为所有选项的实际name值，保证表单数据的有效性，而非自定义字符串。

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