*ngIf - 如何在模板中进行空检查

Question

我正在从 observable 中获取 boolean 值。我正在尝试打印它。但是我什么也打印不出来。

这是我的订阅：

showLeftNavi$: boolean;

    constructor(private store: Store<StateShared>) { }

    ngOnInit() {
        this.store.pipe(select(ObservableActions.getNaviState)).subscribe(data => {
            console.log('data', data); //getting true
            this.showLeftNavi$ = data;
        });
    }

这是我的模板：

<div *ngIf="($showLeftNavi | async) !== 'null'">
    soo {{ $showLeftNavi }} //nothing prints here.
</div>

那么如何在此处检查空值并打印我的 Boolean 值？

Answer 1

而不是 *ngIf="($showLeftNavi | async) !== 'null'" 试试 *ngIf="$showLeftNavi | async"

也就是说，您的变量 $showLeftNavi 似乎不是可观察的，因此 | async 不是必需的。

Answer 2

您不需要 async 管道，因为 showLeftNavi 不可观察或无法保证。

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted https://angular.io/api/common/AsyncPipe

<div *ngIf="showLeftNavi$">
    soo {{ showLeftNavi$ }} //nothing prints here.
</div>

您在一个地方使用 showLeftNavi$，而在另一个地方您使用 $showLeftNavi。

Answer 3

正如之前的答案所指出的，async 适用于 observable，但我认为他们的答案不会如您所愿（如果您只是摆脱 async，您将只会获得布尔值的第一个值，不不管你的 observable 发射了多少次）。 this.store.pipe(select(ObservableActions.getNaviState)) 是您要分配给 async 管道的内容，如下所示：

$showLeftNavi: Observable<boolean>;

    constructor(private store: Store<StateShared>) { }

    ngOnInit() {
        this.$showLeftNavi = this.store.pipe(select(ObservableActions.getNaviState));
    }

（您的 html 没有变化）

Answer 4

让我想到这个问题的问题是如何使用异步管道订阅一个可观察对象，并让 *ngIf 评估为真，即使该值评估为假（例如枚举的 0 值）。

分量：

myEnum$: Observable<MyEnum>;

getDescription(enum: MyEnum): void {....}

查看：

<div *ngIf="(myEnum$ | async) as myEnum">
    <span> {{getDescription(myEnum)}}</span>    <-- still want this to display when 0
</div>

我的结论是 *ngIf 的异步管道有两个不同的功能：

有条件地显示内容
订阅可观察对象以便框架正确管理拆卸

我最后做的是将枚举包装在一个对象中，因此 *ngIf 对对象求真值，然后解包枚举值以传递给函数。

<div *ngIf="(myWrapperObject$ | async) as myWrapperObject">
    <span> {{getDescription(myWrapperObject.enumValue)}} </span>
</div>

我很想知道其他人是否知道更好的方法。

*ngIf - 如何在模板中进行空检查

*ngIf - how to do the null check in template

angular

angular-observable

angular8