如何在RxJS中使用combineLatest有条件地显示组件而不出现空错误？

Question

仅当我的两个可观察量不发出 null 或未定义时，我才想在模板中显示组件。

我使用 RxJS 中的 mergeLatest 运算符来简化条件渲染。但是，我仍然遇到错误：TypeError: Cannot read properties of null (reading 'username').

为什么我的组件使用 null 变量初始化，而 mergeLatest 运算符在检查非空值后发出 true ？

我尝试了一个嵌套的 ngIf 解决方案，如下所示： ngIf with multiple async pipelinevars，它可以工作，但我想使用combineLatest来简化它：*ngIf with multiple asyncpipevariables

这是我当前的实现：

在父组件中：

this.cardAd$ = this._cardAdService.getCardAd(this.id);
this.cardOwner$ = this.cardAd$.pipe(
    switchMap((cardAd: CardAdInfo) => this._userService.getUserInfo(cardAd.userCard.userId))
);

this.isInfoBarVisible$ = combineLatest([this.cardAd$, this.cardOwner$]).pipe(
    map(([cardAd, cardOwner]) => !!cardAd && !!cardOwner)
);


        <app-offer-create-info-bar
            *ngIf="isInfoBarVisible$ | async"
            [cardAd]="(cardAd$ | async)!"
            [cardOwner]="(cardOwner$ | async)!">
        </app-offer-create-info-bar>

子组件：

<div>
     {{ cardOwner.username }}{{ cardAd.name }} 
</div>


export class OfferCreateInfoBarComponent implements OnInit {
    @Input({ required: true }) cardAd!: CardAdInfo;
    @Input({ required: true }) cardOwner!: UserInfo;

    ngOnInit() {
        console.log('cardAd', this.cardAd); // null
        console.log('cardOwner', this.cardOwner); // null
    }
}

Answer 1

将

shareReplay(1)

添加到应重用结果的两个流中。这样下载的值将传递给组件，而不是再次下载

this.cardAd$ = this._cardAdService.getCardAd(this.id).pipe(shareReplay(1));
this.cardOwner$ = this.cardAd$.pipe(
    switchMap((cardAd: CardAdInfo) => this._userService.getUserInfo(cardAd.userCard.userId)),
    shareReplay(1),
);