Angular ng-select如何阻止显示之前选中的项

这个问题我之前在项目里也碰到过，确实是ng-select默认的一个行为——当你清空搜索框时，它会自动恢复之前选中的选项。要取消这个显示，有几种简单的处理方式：

方法1：监听搜索事件，主动清空选中项 #

通过监听ng-select的(search)事件，当搜索关键词被完全清空时，手动把选中的项重置为null：

模板代码 #

<ng-select 
  [(ngModel)]="selectedItem"
  (search)="onSearch($event)"
  [items]="yourItemList"
  bindLabel="labelField"
></ng-select>

组件逻辑 #

onSearch(searchTerm: string) {
  // 当搜索框内容被完全清空时，重置选中项
  if (!searchTerm.trim()) {
    this.selectedItem = null;
  }
}

方法2：监听退格键事件，精准处理场景 #

如果只想针对退格键的操作做处理，可以直接监听退格键事件，当输入框已经为空时触发选中项清空：

模板代码 #

<ng-select 
  [(ngModel)]="selectedItem"
  (keydown.backspace)="handleBackspace($event)"
  [items]="yourItemList"
  bindLabel="labelField"
></ng-select>

组件逻辑 #

handleBackspace(event: KeyboardEvent) {
  const searchInput = event.target as HTMLInputElement;
  // 当输入框已经是空的，再按退格就清空选中项
  if (!searchInput.value) {
    this.selectedItem = null;
  }
}

额外提示 #

如果你的项目用了响应式表单，把[(ngModel)]换成formControlName或者[formControl]，在逻辑里直接调用formControl.setValue(null)即可，原理完全一致。

内容的提问来源于stack exchange，提问作者Миша Анацкий