ngIf Async Pipe 作为仅进行空检查的值

Question

我有一个可观察对象，我想在 ngIf 中创建一个变量，如果值为 null（可观察对象 return 是一个数字），则仅 return false

我需要明确检查 null，因为我的 observable 可以 return 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 }}

我正在使用 Angular10.

Answer 1

通常，当我像这样处理模板中的可观察对象时，我发现创建单个 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$
})

Answer 2

我可以推荐的另一种方法是使用 Nils Melhorn https://github.com/nilsmehlhorn/ngx-observe

的 ngx observe 指令

使用此指令，您可以为下一步、加载甚至错误定义模板。如果发出像零这样的虚假值，也会触发下一个模板。

*ngxObserve="observable$; let obs; before loadingTemplate; error errorTemplate"

ngIf Async Pipe 作为仅进行空检查的值

ngIf Async Pipe as value with only null check

rxjs

angular

rxjs-observables

async-pipe

angular10