本文详解如何在使用 ng-select 实现搜索下拉的场景中，通过代码动态追加新选项（如 {value: 'c', id: 3}）并确保其立即显示为已选状态，关键在于遵循 onpush 变更检测机制，采用不可变更新方式操作 items 和 options 数组。
本文详解如何在使用 ng-select 实现搜索下拉的场景中，通过代码动态追加新选项（如 {value: 'c', id: 3}）并确保其立即显示为已选状态，关键在于遵循 onpush 变更检测机制，采用不可变更新方式操作 items 和 options 数组。
ng-select 默认启用 OnPush 变更检测策略，这意味着组件不会自动响应数组内部元素的突变（如 push()、splice()），而只响应引用变更。因此，直接调用 this.items.push('c') 或 this.options.push(...) 不会触发视图更新，新值既不会出现在下拉列表中，也不会被标记为已选。
✅ 正确做法是：始终用新数组替换原数组引用，确保变更检测生效。以下为完整实现方案：
1. 组件定义（TypeScript）
export class MyComponent {
options = [{ value: 'a', id: 1 }, { value: 'b', id: 2 }];
items: string[] = []; // 注意：类型需与 bindValue 一致（此处为 string）
addDynamicOption() {
const newOption = { value: 'c', id: 3 };
// ✅ 不可变更新 options：扩展原数组，注入新项
this.options = [...this.options, newOption];
// ✅ 不可变更新 items：将新 value 加入选中列表（注意 bindValue="value" → 存储的是 value 字符串）
this.items = [...this.items, 'c'];
}
}
2. 模板保持不变（关键配置已就绪）
<ng-select bindlabel="value" bindvalue="value" item.value>
[multiple]="true"
placeholder="Search for..."
[(ngModel)]="items"
(change)="changeFn($event, false)"
[hideSelected]="true">
<ng-template ng-option-tmp let-item="item"><div class="row">
<span class="text-muted">Task filter: {{ item.value }}</span>
</div>
</ng-template></ng-select><!-- 触发动态添加的按钮 --><button>Add 'c' and select it</button>
⚠️ 注意事项
- bindValue 决定 items 的内容类型：本例中 bindValue="value"，因此 items 必须是 string[]（如 ['a', 'c']），而非对象数组。
- 若需双向绑定对象（如 {value: 'c', id: 3}），应设 bindValue="id" 并确保 items 存储 id 值（如 [1, 3]），同时 bindLabel 仍指向显示字段。
- ng-select 不支持运行时“仅选中但不加入 options”的行为——所选值必须存在于 items 中，且对应项必须存在于 options 中，否则渲染异常。
- 如需清空后重置，同样使用不可变赋值：this.items = []; this.options = [];
通过遵循不可变更新原则，你不仅能正确显示动态添加的选项，还能保障组件性能与响应一致性。这是 Angular + OnPush 组件开发中的核心实践。
