ng-select 属性 ClearSearchOnAdd 未按预期工作

Question

我正在研究 ng-select 并尝试绑定粘贴的项目。我正在尝试粘贴带有 space 分隔符的项目，例如

html:

<ng-select #ngSelect
[items]="people"
[multiple]="true"
bindLabel="name"
[closeOnSelect]="false"
[clearSearchOnAdd]="true"
bindValue="id"
[(ngModel)]="selectedPeople"
(paste)="onPaste($event)">
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
    <input id="item-{{index}}" type="checkbox"    [ngModel]="item$.selected"/> {{item.name | uppercase}}
</ng-template>
   </ng-select>
   </br>
   <small>{{selectedPeople | json}}</small>

TS:

export class MultiCheckboxExampleComponent implements OnInit {

people: Person[] = [];
selectedPeople = [];
@ViewChildren('ngSelect') ngSelect:ElementRef;
constructor(private dataService: DataService,private el:ElementRef) {
}

ngOnInit() {
    this.dataService.getPeople()
        .pipe(map(x => x.filter(y => !y.disabled)))
        .subscribe((res) => {
            this.people = res;
            this.selectedPeople = [this.people[0].id, this.people[1].id];
        });
}

   onPaste(event: ClipboardEvent) {
let clipboardData = event.clipboardData;
let pastedData = clipboardData.getData('text');
    // split using spaces
    var queries = pastedData.split(/\s/);
    //var source = mtc.itemsSource;
    // iterate over each part and add to the selectedItems
    queries.forEach(q => {
     var cnt = this.people.find(i => i.name.toLowerCase() === q.toLowerCase());
     if(cnt != undefined)
     {
         this.selectedPeople = [...this.selectedPeople, cnt.id];
        //this.selectedPeople = [this.people[0].id, this.people[1].id];
    }});
//console.log(pastedData);
 }

  }

项 select 从复选框列表中成功编辑，但粘贴的项目仍然与 select 编辑的项目一起存在。

如何防止粘贴的项目使它们在 selected 项目中不可见。

Answer 1

粘贴事件成功完成后，我使用了模糊事件：

 let nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
      ".ng-input input"
    ) as NodeListOf<HTMLElement>;
    for (let i = 0; nodes[i]; i++) {
      (nodes[i] as HTMLElement).blur();
    }

使用这个我可以解决问题。

ng-select 属性 ClearSearchOnAdd 未按预期工作

ng-select property ClearSearchOnAdd not working as expected

typescript

angular-ngselect

angular