RxJS 运算符相当于模板中的 ((observableX | async) || (observableY | async))

Question

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

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

我想将此并集作为单个属性移动到组件 class 并从组件模板中引用它，就像这样

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

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

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

我可以使用哪些 RxJS 运算符来表示我的组件中的上述内容 class？

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

您可以像这样将其分配给单个变量。使用 combineLatest 时，我们会在每次有一个 observable 发出时发出。我们从每个发出一个布尔值，因为 combineLatest 只发出 当所有至少发出一次 （如果你愿意，你可以跳过它）

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>

RxJS 运算符相当于模板中的 ((observableX | async) || (observableY | async))

RxJS operator equivalent of ((observableX | async) || (observableY | async)) in template

angular

rxjs5