Angular 9数据加载前已渲染、变量赋值后页面不渲染如何解决？

• 异步时序问题：mapperCalendatioStatus 内部调用的getByIdPromocao是异步接口，subscribe回调的执行时机远晚于函数return时机，你返回给gridList的初始是个空数组，后续回调才往数组里追加数据，此时数组引用未发生变化，Angular不会自动触发视图更新。
• 逻辑错误：promocoesStatus 数组定义放在forEach循环内部，每次循环都会重置该数组，最终return的是最后一次循环创建的数组，只会保留最后一条处理结果。

采用RxJS操作符处理异步流，等所有并行请求全部返回后再一次性给gridList赋值，避免嵌套订阅带来的时序问题。

第一步：修改mapper函数，返回Observable流 #

// 先导入依赖
import { forkJoin, map, Observable, of, switchMap } from 'rxjs';

mapperCalendatioStatus(promocoes: any[]): Observable<ConsultaPromocaoModel[]> {
  // 将每个promocao转换为单个请求Observable
  const requestList = promocoes.map(p => {
    const consultaPromocao = new ConsultaPromocaoModel();
    consultaPromocao.id = p.id;
    consultaPromocao.codigoIdentificacao = p.codigoIdentificacao;
    consultaPromocao.nome = p.nome;

    return this.serviceCouponGenerate.getByIdPromocao(p.id).pipe(
      map((response: any) => {
        // 请求返回后填充cupom字段
        consultaPromocao.cupom = response.length ? 'YES' : 'NO';
        return consultaPromocao;
      })
    )
  });
  // 合并所有请求，全部完成后返回结果数组
  return requestList.length ? forkJoin(requestList) : of([]);
}

第二步：修改外层调用逻辑 #

this.servicePromotion.list(text)
  .pipe(
    switchMap((res: any) => {
      if (!res?.list) return of([]);
      // 切换流，等所有优惠券查询请求完成
      return this.mapperCalendatioStatus(res.list);
    })
  )
  .subscribe((gridList: ConsultaPromocaoModel[]) => {
    // 所有数据处理完成后一次性赋值，直接触发视图渲染
    this.gridList = gridList;
    // 如果组件开启了ChangeDetectionStrategy.OnPush，加下面这行手动触发变更检测
    // this.cdr.markForCheck();
  })

可选：手动触发变更检测 #

如果你的组件配置了ChangeDetectionStrategy.OnPush策略，需要先在组件中注入ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef) {}

赋值完成后调用this.cdr.markForCheck()即可强制更新视图。

• 不要在循环中直接嵌套subscribe，容易出现时序错乱、内存泄漏问题，统一用RxJS操作符管理异步流
• Angular默认不会检测数组内部元素的增删修改，要么直接替换整个数组的引用，要么手动触发变更检测
• 组件销毁时记得取消所有订阅，避免内存泄漏，可以用takeUntil操作符统一管理

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