* ngIf - как сделать проверку нуля в шаблоне

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>

так как проверить здесь ноль и вывести мое 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

Как отмечалось в предыдущих ответах, асинхронность работает для наблюдаемых, но я не думаю, что их ответ будет работать так, как вы хотите (если вы просто избавитесь от асинхронности, вы получите только первое значение логического значения, независимо от того, какмного раз твоя наблюдаемая стреляла).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 3

Вместо *ngIf="($showLeftNavi | async) !== 'null'" попробуйте просто *ngIf="$showLeftNavi | async"

Тем не менее, ваша переменная $showLeftNavi не выглядит наблюдаемой, поэтому | async не требуется.

Answer 4

Вот стек, который я сделал, чтобы попрактиковаться в ngrx

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

На основе разговора по нг-конфу - 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'">
...