Question

我从可观察的事物中获得了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>

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

Answer 1

您不需要async管道，因为showLeftNavi是不可观察或承诺的。

异步管道订阅Observable或Promise并返回它发出的最新值 https://angular.io/api/common/AsyncPipe

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

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

Answer 2

尝试使用*ngIf="($showLeftNavi | async) !== 'null'"代替*ngIf="$showLeftNavi | async"

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

Answer 3

正如先前的答案所指出的，异步对于可观察的是有效的，但是我认为它们的答案不会如您所愿（如果您摆脱了异步，那么无论如何，您只会得到布尔值的第一值）很多次，您的可观察解雇了）。您要为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

这是我练习ngrx时遇到的问题

Stackblitz-https://stackblitz.com/edit/github-bqy1s2-bananaapp

基于ng-conf谈话-https://nitayneeman.com/posts/all-talks-from-ng-conf-2019/#crash-course-angular-and-ngrx

您可以在.ts文件中看到自己想要的 this.banana$ = this.store.pipe(select(getMyBanana))

<div *ngIf = "banana$ | async as banana">
      <form>
...
      <div *ngIf="!banana.isPeeled && banana.color === 'yellow'">
...

Answer 5

我遇到的问题是如何使用异步管道订阅可观察对象，并且即使值评估为虚假（例如，0，也将*ngIf评估为真）枚举的值）。

组件：

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-如何在模板中执行空值检查

5 个答案: