Angular async pipe显示流初始值而非最新发射值如何解决？

问题根因 #

• 核心错误有3处，导致AsyncPipe只能拿到BehaviorSubject初始值：
  1. 管道计算得到的最终布尔值没有调用next()推送回canRequestPricing$这个BehaviorSubject，AsyncPipe监听的是Subject的原始值，自然不会更新
  2. 管道中添加的take(1)会在第一次流触发后直接结束订阅，后续即使有新值也不会触发计算逻辑
  3. 冗余订阅：既用了AsyncPipe自动订阅canRequestPricing$，又手动写了Subscription做计算，无意义还容易造成内存泄漏

修复方案 #

方案1：重构流逻辑，移除手动订阅（最推荐） #

直接把计算逻辑整合到给AsyncPipe的流中，不需要额外维护BehaviorSubject和手动订阅：

// 替换原BehaviorSubject定义
public canRequestPricing$: Observable<boolean>;

public ngOnInit(): void {
    this.canRequestPricing$ = this.mappedItem.canRequestPricing().pipe(
        map(canRequestPricingFromApi => {
            return this.canRequestPricing() && canRequestPricingFromApi;
        }),
        // 可选：添加初始值避免接口返回前AsyncPipe取到null
        startWith(false)
    );
}

模板无需修改，保持原有绑定即可：

<button [disabled]="!(canRequestPricing$ | async)">

方案2：保留BehaviorSubject（适用于需要后续手动更新流值的场景） #

修改订阅逻辑，将计算结果推回Subject，同时根据业务需要决定是否保留take(1)：

public canRequestPricing$ = new BehaviorSubject<boolean>(false);
private canRequestPricingSubscription?: Subscription;

public ngOnInit(): void {
    this.canRequestPricingSubscription = this.canRequestPricing$.pipe(
        mergeMap(() => this.mappedItem.canRequestPricing()),
        // 若只需要初始化调用一次接口则保留take(1)，否则删除
        take(1),
        map(canRequestPricingFromApi => {
            return this.canRequestPricing() && canRequestPricingFromApi;
        })
    ).subscribe(can => {
        // 关键：将计算结果推回Subject，AsyncPipe才能拿到最新值
        this.canRequestPricing$.next(can);
    });
}

public ngOnDestroy(): void {
    // 销毁时取消订阅避免内存泄漏
    this.canRequestPricingSubscription?.unsubscribe();
}

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