RxJS操作符等效于模板中的((observableX | async) || (observableley | asy

Question

我的组件模板中有以下代码

<mat-spinner *ngIf="((facade.user.data$.isLoading | async) || (facade.product.data$.isLoading | async))"></mat-spinner>

我想把这个联合作为一个单独的属性移动到组件类中，并从组件模板中引用它，像这样

<mat-spinner *ngIf="detailLoading | async"></mat-spinner>

但是，我找不到使用哪个RxJS联合操作符来表示可观察对象中的条件

(facade.user.data$.isLoading | async) || (facade.product.data$.isLoading | async)

我可以使用哪个RxJS操作符来在我的组件类中表示上述内容?

Answer 1

如果在模板(管道)中需要操作符，可以自己创建。

我觉得应该是这样的:

public detailLoading$: Observable<boolean> = this.facade.user.data$.pipe(
combineLatestWith(this.facade.product.data$),
map(data => data[0].isLoading || data[1].isLoading )
)

Answer 2

您可以像这样将它分配给单个变量。使用combinellatest，我们会在可观察对象发出时发出。我们从每个函数发出一个布尔值，因为当所有函数都发出至少一次时，combinellatest才发出(如果你愿意，你可以跳过它)

get var$(): Observable<boolean> {
return combineLatest([
facade.user.data$.isLoading.pipe(startWith(false)),
facade.product.data$.isLoading.pipe(startWith(false))
]).pipe(
// skip(1) ,
map( ([a,b]) => a || b )
)
}

在模板中我可以这样做

<ng-container *ngIf="{ isLoading: (var$ | async ) } as foo">
<mat-spinner *ngIf="foo.isLoading"></mat-spinner>
</ng-container>