本文介绍在使用 ng-select 实现可搜索多选下拉框时，如何正确动态添加新选项并使其立即显示为已选状态，关键在于遵循 OnPush 变更检测机制，通过不可变方式更新 items 和 options 数组。
本文介绍在使用 ng-select 实现可搜索多选下拉框时，如何正确动态添加新选项并使其立即显示为已选状态，关键在于遵循 onpush 变更检测机制，通过不可变方式更新 `items` 和 `options` 数组。
在 Angular 中使用 @ng-select/ng-select 时，组件默认采用 OnPush 变更检测策略——这意味着它不会自动响应数组内部的突变操作（如 push()、splice()），而仅在输入属性（如 [items]、[(ngModel)]）引用发生改变时才触发更新。
因此，若直接调用 this.items.push({value: 'c', id: 3})，虽然数据被加入数组，但 ng-select 无法感知该变化，导致新值既不会出现在下拉列表中，也不会被标记为已选。同理，若未同步更新 options，用户也无法在搜索中找到该新选项。
✅ 正确做法是：始终用新数组替代旧引用，确保变更检测生效：
// ✅ 推荐：使用展开运算符创建新数组（不可变更新）
addDynamicOption() {
const newItem = { value: 'c', id: 3 };
// 更新 options：使新选项可在下拉列表中被搜索/选择
this.options = [...this.options, newItem];
// 更新 items：使新选项立即显示为已选（注意 bindValue 是 'value'，所以推入 'c' 字符串）
this.items = [...this.items, 'c'];
}
⚠️ 注意事项：
- bindValue="value" 表示模型绑定的是 item.value 字段，因此 items 数组中应存入 'c'（而非整个对象 {value: 'c', id: 3}），否则会导致选中状态不匹配；
- 若需支持对象绑定（如 bindValue="id"），则 items 应对应推入 3，并确保 bindLabel 正确指向显示字段；
- 模板中 ng-option-tmp 自定义模板内访问 item['value'] 是合法的，但建议改用点语法 item.value 提升可读性；
- 避免在循环或高频事件中频繁重建大数组，必要时可结合 trackBy 或服务层缓存优化性能。
? 扩展建议：若需支持“动态创建未存在于 options 中的选项”（即类似“添加新标签”场景），可启用 addTag 输出并配合自定义逻辑，但本例中需先确保新项已存在于 options 才能被正常选中。
通过遵循不可变更新原则，即可让 ng-select 精准响应动态数据变化，实现流畅的交互体验。
