Angular async管道搭配rxjs map转换Observable后无法渲染数据

你在Angular模板的插值表达式中调用方法动态生成经过pipe处理的Observable时，触发了async管道的订阅异常：

• 未加pipe的初始版本能正常渲染，是因为方法直接返回了condition.value上存储的原Observable引用，async管道订阅的是固定不变的同一个实例，可以正常收到推送值。
• 增加pipe(map(...))逻辑后，每次Angular变更检测运行，displayConditionsFromObservable方法都会返回一个全新创建的Observable实例。async管道检测到传入的Observable引用变化时，会立刻取消上一个Observable的订阅，转而订阅新返回的实例。这个过程在高频变更检测中会反复触发，Observable还没来得及返回值就被取消订阅，最终没有任何内容渲染。更换其他rxjs操作符也无法解决问题，因为核心矛盾是引用频繁变动导致的订阅反复中断，和操作符本身逻辑无关。

推荐优先使用第一种方案，稳定性和性能都更好：

• 方案1：提前完成Observable转换，保证引用稳定
  不要在模板绑定调用的方法中动态生成新Observable，在数据初始化、赋值到表格数据源的阶段，就完成所有Observable的转换逻辑，把处理后的Observable直接存到数据对象上，保证模板取到的是固定引用。
  预处理逻辑示例：

  // 给表格row赋值前就完成转换
  tableData.forEach(row => {
    row.conditions.forEach(condition => {
      if (isObservable(condition.value)) {
        // 转换后的Observable直接挂载到condition属性上，引用固定
        condition.displayValue = (condition.value as Observable<string>).pipe(
          map(it => `Changed data ${it}`)
        );
      }
    })
  })
  

  对应模板修改：

  <ng-container *ngFor="let condition of row.conditions">
    <span *ngIf="isObservable(condition)">{{ condition.displayValue | async }}</span>
    <span *ngIf="!isObservable(condition)">{{displayConditions(condition)}}</span>
  </ng-container>
  

• 方案2：方法内返回的Observable增加缓存配置
  如果受业务限制必须在模板调用的方法中处理Observable，给管道流增加shareReplay(1)操作符，缓存订阅实例和最新返回值，避免频繁取消订阅导致拿不到数据：

  displayConditionsFromObservable(condition: Condition): Observable<string> {
    const obs = condition.value as Observable<string>;
    return obs.pipe(
      map(it => `Changed data ${it}`),
      shareReplay(1)
    );
  }
  

注意：Angular默认变更检测策略下，模板中绑定的方法每次变更检测都会重新执行，不要在这类方法中返回新创建的引用类型值（包括Observable、数组、普通对象），否则很容易引发订阅失效、性能损耗甚至渲染死循环问题。

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