Angular中ngModel值变化时如何让关联Observable重新发射并更新UI

核心结论 #

你需要将依赖的动态变量mappedItem.selectedBusinessEntities改造为可观察流，这是最符合RxJS响应式逻辑的解决方案。

问题原因 #

• 当前的selectedBusinessEntitiesOptionsAsDtos$仅依赖静态的businessEntitiesOptions$，这是典型的冷Observable（通常对应后端HTTP请求），仅会在初始化时发射1次全量业务实体数据就结束，后续mappedItem.selectedBusinessEntities普通变量的变更不会被RxJS流感知，自然不会触发重新计算过滤后的选项列表。
• 你尝试重新subscribebusinessEntitiesOptions$无效的原因是：冷Observable完成后再次订阅不会给已有的下游流传值，且如果没有加共享操作符，手动订阅和async管道绑定的订阅是两个独立的流，手动订阅的执行不会通知到UI绑定的流。
• 调试时看到过滤逻辑执行但UI没更新，就是因为两个订阅相互独立，手动触发的逻辑没有将新值推送给async管道绑定的流，自然不会触发UI更新。

解决方案 #

步骤1：新增选中ID的可观察流

把动态变化的选中业务实体ID从普通变量改为可观察的BehaviorSubject，初始化时用原有初始值：

// 新增：选中业务实体ID的可观察流，初始值取mappedItem的初始值
public selectedBusinessEntities$ = new BehaviorSubject<number[]>(this.mappedItem.selectedBusinessEntities);

步骤2：重构依赖选中值的Observable

用combineLatest组合静态全量实体流和动态选中ID流，任意一个流发射新值都会重新计算过滤结果：

private _initSelectOptions(): void {
    this.teamsOptions$ = this.teamsLogicService.$getList();
    this.userRoleTagsOptions$ = this.tagsLogicService.$getList();
    this.businessEntitiesOptions$ = this.businessEntitiesLogicService
        .$getList()
        .pipe(
            map(businessEntities => orderBy(businessEntities, be => be?.name?.toLowerCase()))
        );
    // 改造：组合两个流，任意值变更都会重新过滤
    this.selectedBusinessEntitiesOptionsAsDtos$ = combineLatest([
        this.businessEntitiesOptions$,
        this.selectedBusinessEntities$
    ]).pipe(
        map(([allEntities, selectedIds]) => 
            allEntities.filter(be => selectedIds.includes(be.id))
        )
    );
    // 其余逻辑不变，isMobileNumberMandatory$依赖上面的流，会自动同步更新
    this.isMobileNumberMandatory$ = this.selectedBusinessEntitiesOptionsAsDtos$.pipe(
        map(() => {
            const buildingConsultantTag = this.userRoleTagsOptions?.find(
                tag => tag.key === USER_TAG_CONSTANTS_CONST.BUILDING_CONSULTANT
            );
            return this.mappedItem?.selectedTags.some(tag => tag === buildingConsultantTag?.id);
        })
    );
    this.userRoleTagsOptions$.subscribe(res => this.userRoleTagsOptions = res);
}

步骤3：修改选中变更事件，给Subject推送新值

删掉原来无效的subscribe和手动变更检测代码，只需要给Subject传新值即可：

public selectedBusinessEntitiesChanged(entities: number[]): void {
    this.mappedItem.selectedBusinessEntities = entities;
    // 给流推送新值，自动触发下游所有依赖流的重新计算
    this.selectedBusinessEntities$.next(entities);
}

步骤4：HTML保留现有写法即可

<cb-selection-list name="selectedBusinessEntities"
                   [ngModel]="mappedItem.selectedBusinessEntities"
                   (ngModelChange)="selectedBusinessEntitiesChanged($event)"
                   [options]="businessEntitiesOptions$ | async"
                   [readonly]="isView()"
                   maxHeight="400px"
                   [slim]="true">
</cb-selection-list>
<cb-select label="Primary Business Entity"
           name="primaryBusinessEntity"
           [required]="true"
           [(ngModel)]="mappedItem.primaryBusinessEntity"
           [options]="selectedBusinessEntitiesOptionsAsDtos$ | async"
           [readonly]="isView()">
</cb-select>

补充注意点 #

• 不要手动订阅不需要手动处理的流，async管道会自动管理订阅和销毁，避免内存泄漏，你原有代码中isMobileNumberMandatory$、teamsOptions$的手动订阅可以直接删掉。
• 如果组件使用ChangeDetectionStrategy.OnPush，这个方案也能正常工作，因为async管道会自动触发变更检测。
• 如果需要在选中值变更时重置第二个下拉框的选中值，可以在selectedBusinessEntitiesChanged方法里加一行this.mappedItem.primaryBusinessEntity = null;避免选中的值不在新的选项列表里的问题。

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