ngIf 异步管道作为仅进行空检查的值

Question

我有一个可观察量，我想在 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。

Answer 1

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

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

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

<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$
})