Angular中concatMap配合async管道时*ngIf不生效问题

该异常是Angular模板绑定反模式+RxJS延迟操作符特性两者叠加导致的，逻辑链非常明确： #

1. 第一个诱因：模板中调用方法返回新Observable实例，会导致async管道反复退订重连 #

Angular默认变更检测的执行频率极高，所有被zone.js监控的异步操作（定时器、Promise、DOM事件、HTTP响应等）都会触发变更检测，每次变更检测运行时都会重新执行模板里的所有表达式。
你在getOutputs()方法内部调用pipe()拼接操作符，意味着每次执行这个方法都会生成一个全新的Observable实例。而async管道的内置逻辑是：如果收到的输入Observable引用和上一次的不一致，会立刻退订旧Observable，订阅新的Observable。

对比你之前能正常运行的两个版本：不管是直接返回类属性this.values$还是直接返回this.outputs$，每次方法调用返回的都是同一个Observable引用，async管道不会反复触发退订重连，所以行为正常。

2. 第二个诱因：delay操作符让新订阅的首个值延迟1秒发射 #

你使用的BehaviorSubject在被订阅时会同步吐出当前持有的最新值——ngOnInit执行完后，四个值已经被同步推送完成，此时BehaviorSubject存的最新值是'done'。但你加的concatMap((x) => of(x).pipe(delay(1000)))操作符，会把所有输入值都延迟1秒才转发给下游，也就是说每次async管道订阅新生成的Observable后，至少要等1秒才能收到第一个值。

3. 两者叠加后的异常逻辑 #

• 每次async订阅新流之后，就开始等待1秒延迟，在这1秒窗口内只要有任何变更检测触发（甚至旧订阅吐出值、订阅操作本身都可能触检），就会重新调用getOutputs()生成新Observable，async会立刻退订还在等延迟的旧流，转订新流，重新开始1秒倒计时。
• 绝大多数订阅都活不到1秒延迟到期就被取消，async管道几乎拿不到稳定的下发值，*ngIf一直等不到可渲染的真值，自然不会显示任何内容。
• 你观察到的'done'每隔1秒被重复打印，是少量刚好熬到延迟到期的订阅下发了值：这些值下发的瞬间会触发新一轮变更检测，立刻生成新Observable替换掉当前流，刚拿到的'done'直接被丢弃，视图根本来不及完成渲染。

不要在模板绑定的方法里动态拼接Observable，把需要使用的流提前在组件类中声明为固定引用的属性即可：

// 提前在类属性层面拼接好流，保证引用唯一
outputsWithDelay$ = this.outputs$.pipe(
  concatMap((x) => of(x).pipe(delay(1000)))
);

getOutputs(): Observable<null | 'done' | number> {
  return this.outputsWithDelay$;
}

通用实践：不要在模板表达式中调用会返回新对象、新数组、新Observable实例的方法，这类写法不仅会导致这类难以排查的异常，还会大幅拖慢变更检测的执行性能。 #

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