4

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

4

2 回答 2

3

通常，当我像这样处理模板中的可观察对象时，我发现创建一个从组件中的其他可观察对象构建的单个 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$
})
于 2020-11-13T12:39:15.577 回答
0

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

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

*ngxObserve="observable$; let obs; before loadingTemplate; error errorTemplate"
于 2020-11-13T12:55:43.123 回答