如何在带搜索功能的ng-select中动态设置选中项?
实现动态添加选项并自动选中的方案
先修正代码里的错误,再完成自动选中的逻辑:
- 修正动态添加选项的函数
原函数里的this.item.push是错误的,需要往ng-select的数据源options里添加新选项,同时把新选项的绑定值加入选中集合items:
addNewOption() { const newOption = {value: 'c', id:3}; // 将新选项添加到ng-select的选项数据源 this.options.push(newOption); // 将新选项的bindValue值加入ngModel绑定的数组,实现自动选中 this.items.push(newOption.value); }
- 逻辑说明
[items]="options"是ng-select的选项数据源,必须先把新选项加入这里,才能在组件中显示出来[(ngModel)]="items"绑定的是选中项集合,你设置了bindValue="value",意味着选中项存储的是选项的value字段,所以把newOption.value(也就是'c')加入items数组,就能让对应的选项自动选中
- 变更检测兼容处理
如果你的组件使用了OnPush变更检测策略,普通的push操作可能无法触发组件更新,这时可以用扩展运算符创建新数组来强制触发变更检测:
this.options = [...this.options, newOption];
内容的提问来源于stack exchange,提问作者Sravanthichowdary Andru
相关产品推荐
相关产品推荐

