Ng-select配置[clearable]仅清空当前点击筛选字段的方法

点击单个清除按钮触发两个筛选器同时清空，核心问题不是[clearable]属性的开关值错误，是现有代码存在3个配置冲突导致事件和状态串扰：

• 循环渲染的所有ng-select都使用了同名模板引用变量#select，Angular解析模板时会出现实例引用冲突，清除事件触发时会错误作用到所有同名组件实例
• 外层筛选器容器的[ngClass]绑定使用了全局变量selectedItem做状态判断，且绑定表达式末尾多了多余单引号存在语法错误，没有绑定当前循环项自身的选中状态，全局状态变更会同步影响所有筛选器
• 单选模式下ngModel错误绑定到了复数命名的datum.selectedItems（通常是数组类型），和ng-select单选模式的单值赋值逻辑不匹配，清空值时容易出现全局覆盖问题

[clearable]本身不需要做特殊的全局/差异化配置，ng-select默认clearable值为true，只要解决上述的实例冲突、绑定错误问题，点击清除按钮就只会清空当前操作的单个筛选器。如果需要显式声明属性，直接给每个实例单独配置[clearable]="true"即可，不要把[clearable]绑定到全局共享的布尔变量上。

修正后的可运行代码如下：

<div class="filter-item" *ngFor="let datum of data" [ngClass]="{'select-filter': datum.selectedItem}">
  <div class="title">
    <span>{{ datum.key }}</span>
  </div>
  <div class="select">
    <ng-select 
      [placeholder]="'Select'" 
      [items]="datum.data" 
      [multiple]="false" 
      bindLabel="label" 
      [(ngModel)]="datum.selectedItem" 
      appendTo="body" 
      [clearable]="true"
      (change)="onChange($event, datum)">
    </ng-select>
  </div>
</div>

• 如果业务需要在模板或组件类中引用ng-select实例，不要在*ngFor循环内使用固定名称的模板变量，建议通过ViewChildren按循环索引获取对应实例，避免同名引用冲突
• 对应onChange事件处理方法中，不要给全局的selectedItem变量赋值，所有选中状态要维护在每个循环项datum自身的属性上，从根源避免状态串扰
• 如果需要单独控制某个筛选器是否可清除，把[clearable]绑定到当前循环项自身的布尔属性即可，写法为[clearable]="datum.canClear"

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