如何在ng-select中对比其他数组筛选唯一选项并解决无法选中问题

直接在[items]属性绑定返回新数组的过滤函数时，Angular每次触发变更检测都会重新执行该函数，生成全新的数组实例。ng-select内部会监听到选项列表的引用变更，自动重置选中状态，因此出现选项展示正常但无法选中的问题。

你可以通过「预计算过滤结果+手动触发更新」的方式解决，具体步骤如下：

1. 声明三个变量分别存储原始全量选项、已选中的对比数组、给ng-select使用的过滤后选项

// 所有可选择的原始选项列表
allPotentialItems: any[] = [];
// 用于对比排除的已选中项数组
selectedItems: any[] = [];
// 给ng-select绑定用的过滤后仅可选列表
filteredOptions: any[] = [];

2. 封装独立的过滤方法，在需要更新选项的时候主动调用，不要在模板中直接绑定执行过滤

// 过滤逻辑：仅保留未出现在已选中数组中的选项，建议用唯一字段（如id）判断，不要用对象引用对比
updateFilteredOptions() {
  const selectedItemIds = this.selectedItems.map(item => item.id);
  this.filteredOptions = this.allPotentialItems.filter(item => !selectedItemIds.includes(item.id));
}

3. 在所有会影响可选列表的时机调用过滤方法：比如初始化时、已选中数组更新时、原始全量选项变更时，你当前的refreshRows方法中也可以加入该调用
4. 修改ng-select模板绑定，将[items]绑定到预计算的filteredOptions变量即可

<ng-select
   *ngIf="!value"
   [(ngModel)]="arrayOfSelectedItems[rowIndex]"
   [items]="filteredOptions"
   appendTo="body"
   (change)="refreshRows()"
>
   <ng-template ng-option-tmp let-item="item">
       {{item.name}}
   </ng-template>
</ng-select>

内容的提问来源于stack exchange，提问作者D-Abd1