angular - ngIf 异步管道作为仅空检查的值

Question

我有一个 observable，我想在 ngIf 中创建一个变量，并且仅在值为 null 时返回 false(该 observable 返回一个数字)
我需要明确检查 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

通常，当我像这样处理模板中的 observable 时，我发现创建一个从组件中的其他 observable 构建的单个 vm$ observable 要容易得多(注意，最终 combineLatest 将支持字典，这意味着你不会有做 map ):

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