ng-select开启typeahead与multiple后脚本移除pill出现空标签如何解决

问题根因 #

空标签问题由两个不当操作共同导致：

• 直接通过splice原地修改ngModel绑定的selected数组，ng-select的变更检测默认基于数组引用变化，无法感知到数组原地修改的状态更新
• 强制通过showSelect开关销毁重建ng-select组件的操作，会导致组件内部选中状态和外部绑定值不同步，最终渲染出空pill标签

解决方案 #

方案1：替换数组引用触发变更检测 #

直接删除销毁重建组件的逻辑，修改selected数组时生成新数组替换旧引用即可：

修改后脚本代码

select(event) {
  this.selectTerm = event;
}

removeSelect(element, index) {
  element.splice(index, 1);
  // 用filter生成新数组替换旧引用，触发ng-select的变更检测
  this.selected = this.selected.filter((_, i) => i !== index);
}

方案2：调用ng-select官方API移除项（更稳妥） #

直接通过视图引用调用ng-select内置的移除方法，完全避免状态不同步问题：

第一步：给ng-select添加模板引用

<ng-select #ngSelectRef *ngIf="showSelect" [items]="items$ | async" bindLabel="name" bindValue="id" (change)="select($event)"
  [closeOnSelect]="true" [(ngModel)]="selected" [multiple]="true" [hideSelected]="true" [typeahead]="input$">
</ng-select>

第二步：组件中引入NgSelectComponent并获取视图引用

import { NgSelectComponent } from '@ng-select/ng-select';

// 类内部声明
@ViewChild('ngSelectRef') ngSelectRef: NgSelectComponent;

第三步：修改removeSelect方法调用官方API

removeSelect(element, index) {
  element.splice(index, 1);
  // 调用内置方法移除指定项，组件内部自动同步状态
  this.ngSelectRef.removeItem(this.selected[index]);
}

优化建议 #

无需单独维护selectTerm变量，直接用绑定的selected数组渲染上方的自定义pill，减少重复状态，进一步降低状态不同步的概率。

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