Angular中ng-select绑定的modules数组更新后列表未同步刷新问题

按优先级依次排查处理：

1. 手动触发变更检测 #

如果服务回调运行在Angular的NgZone上下文外，哪怕重新赋值数组也不会触发视图更新。

• 先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

• 在订阅的赋值逻辑后补充触发逻辑：

public onChangeClass(event) {
   this.moduleService.getModulesByLevel(this.form.get("levels").value).subscribe((data: any[]) => {
      let elements = data.filter(module => module.assignClasses.some(item => event.map(el => el.classId).includes(item.classs.classId)));
      this.modules = [...elements];
      // 手动触发变更检测
      this.cdr.detectChanges();
   })
}

如果组件使用了OnPush变更检测策略，替换为this.cdr.markForCheck()即可。

2. 排查赋值覆盖逻辑 #

检查组件内是否有其他逻辑（其他订阅、生命周期钩子、其他控件的变更事件）在onChangeClass执行后，将modules重新赋值为旧数据。比如是否存在其他位置重复调用getModulesByLevel，返回的旧结果覆盖了刚过滤的新数组。

3. 强制ng-select重渲染 #

如果上述操作无效，可尝试先清空数组再重新赋值，强制组件刷新：

this.modules = [];
setTimeout(() => {
  this.modules = [...elements];
  this.cdr.detectChanges();
}, 0);

4. 校验数据结构 #

确认过滤后的每个元素都包含designation（绑定显示文本）、moduleId（绑定值）字段，字段缺失会导致渲染异常，表现为列表未正常更新。

内容的提问来源于stack exchange，提问作者Aymen Kanzari