You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在带搜索功能的ng-select中动态设置选中项?

实现动态添加选项并自动选中的方案

先修正代码里的错误,再完成自动选中的逻辑:

  1. 修正动态添加选项的函数
    原函数里的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);
}
  1. 逻辑说明
  • [items]="options"是ng-select的选项数据源,必须先把新选项加入这里,才能在组件中显示出来
  • [(ngModel)]="items"绑定的是选中项集合,你设置了bindValue="value",意味着选中项存储的是选项的value字段,所以把newOption.value(也就是'c')加入items数组,就能让对应的选项自动选中
  1. 变更检测兼容处理
    如果你的组件使用了OnPush变更检测策略,普通的push操作可能无法触发组件更新,这时可以用扩展运算符创建新数组来强制触发变更检测:
this.options = [...this.options, newOption];

内容的提问来源于stack exchange,提问作者Sravanthichowdary Andru

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 18:13:22