如何解决ng-select属性ClearSearchOnAdd无法正常工作
我正在进行ng-select并试图绑定粘贴的项目。 我正在尝试使用空格分隔符粘贴项目,例如
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);
}
}
已成功从复选框列表中选择项目,但粘贴的项目仍与所选项目一起存在。
我如何防止粘贴的项目,使它们在选定的项目中不可见。
解决方法
粘贴事件成功完成后,我就使用了模糊事件:
let nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
".ng-input input"
) as NodeListOf<HTMLElement>;
for (let i = 0; nodes[i]; i++) {
(nodes[i] as HTMLElement).blur();
}
使用此功能我可以解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。