如何禁用ng-select的选项默认选择功能？Angular5.2.0+ng-select1.6.3

针对Angular 5.2.0 + ng-select 1.6.3的场景，要禁用点击下拉选项时的默认选中行为（即点击选项不会将其显示在ng-select上方），可以通过阻止选项区域的点击事件传播来实现，同时保留复选框的交互逻辑，具体方案如下：

实现步骤 #

1. 自定义选项模板并阻止事件传播
   在ng-option-tmp模板的外层容器上添加(click)="$event.stopPropagation()"，阻断点击事件向上传递给ng-select的默认选中逻辑。同时将复选框独立出来，确保其点击不受影响：

<ng-select 
  [items]="data" 
  [multiple]="true" 
  [searchable]="true" 
  placeholder="请选择"
>
  <ng-template ng-option-tmp let-item="item">
    <div (click)="$event.stopPropagation()">
      <input 
        type="checkbox" 
        [(ngModel)]="item.checked" 
        (click)="handleCheckboxToggle(item)"
      >
      {{ item.displayLabel }}
    </div>
  </ng-template>
</ng-select>

2. 手动维护选中项状态
   由于禁用了ng-select的默认选中逻辑，需要在组件类中自行管理选中项数组，通过复选框的点击事件更新状态：

// 组件类中定义
selectedItems: YourItemType[] = [];

handleCheckboxToggle(item: YourItemType) {
  if (item.checked) {
    // 添加选中项
    this.selectedItems.push(item);
  } else {
    // 移除选中项
    const targetIndex = this.selectedItems.findIndex(i => i.id === item.id);
    if (targetIndex !== -1) {
      this.selectedItems.splice(targetIndex, 1);
    }
  }
}

关键注意事项 #

• 必须设置[multiple]="true"：该属性是ng-select启用多选模式的前提，适配自定义复选框的使用场景。
• 避免绑定[(ngModel)]：如果绑定了ng-select的ngModel，即使阻止了点击事件，可能仍会触发部分默认逻辑，因此改用自定义数组selectedItems维护选中状态更可靠。

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