时间戳

首页 > 解决方案 > ngIf Async Pipe 作为值，只有空检查

angular - ngIf Async Pipe 作为值，只有空检查

问题描述

我有一个可观察对象，我想在 ngIf 中创建一个变量，并且仅在值为 null 时返回 false（可观察对象返回一个数字）

我需要明确检查 null 因为我的 observable 可以返回 0 作为触发 else 块的值。

我试过以下

*ngIf="(observable$ | async) as obs; obs !== null; esle #elseTemplate"

*ngIf="((observable$ | async) as obs) !== null; esle #elseTemplate"

*ngIf="(observable$ | async) !== null; $implicit = obs; else #elseTemplate"
// this returns the boolean

我目前看起来不太优雅的解决方案是

*ngIf="(observable$ | async) !== null; esle #elseTemplate"
{{ observable$ | async }}

我正在使用 Angular 10。

标签： angularrxjsangular10rxjs-observablesasync-pipe

解决方案

通常，当我像这样处理模板中的可观察对象时，我发现创建一个从组件中的其他可观察对象构建的单个 vm$ 可观察对象要容易得多（注意，最终 combineLatest 将支持字典，这意味着您不会拥有做地图）：

vm$ = combineLatest([
    this.observable$,
    this.observable2$
])
.pipe(
    map(([observable, observable2]) => ({
        observable,
        observable2
    }))
);

然后在您的 dom 中，您在 vm$ 上执行 ngIf，您可以直接比较 observable 的输出。

<ng-container *ngIf="vm$ | async as vm">
    <ng-container *ngIf="vm.observable !== null; else #elseTemplate">
    
    </ng-container>
    ...
</ng-container>

编辑 当 combineLatest 支持字典时，vm$ 创建变得更简单：

vm$ = combineLatest({
    observable: this.observable$,
    observable2: this.observable2$
})

推荐阅读