Angular * ngif с Observable и данными от асинхронных вызовов

Question

Я использую несколько сервисов REST для сбора данных, а затем изменяю значение Observable в коде моего компонента.Я пытаюсь использовать * ngIf, чтобы показать / скрыть теги div на основе результата.Однако, это не работает, * ngIf не обновляется в зависимости от изменения в Observable.

Должен ли я запускать обнаружение изменений?Какой лучший способ добиться этого в Angular 7?Вот один пример, который я попробовал:

HTML:

<div *ngIf="isAnimal$">
     <p>animal</p>
</div>

Компонент:

public isAnimal$: Observable<boolean> = of(false);
...
ngOnInit() {
  checkAnimal();
}

private checkAnimal() {
  this._dataService.getData()
      .subscribe((result) => {
         if (result === 'animal') {
           this.isAnimal$ = of(true);
         }
      });
}

Я также попытался создать простой сервис, который тоже не работал.Например: Угловая * ngIf привязка к функции

Answer 1

Я предлагаю следующее:

HTML:

<div *ngIf="isAnimal">
     <p>animal</p>
</div>

Компонент:

public isAnimal: boolean = false;

ngOnInit() {
  checkAnimal();
}

private checkAnimal() {
  this._dataService.getData().subscribe(
    (result) => {
       if (result === 'animal') {
         this.isAnimal = true;
       }
    },
    (error) => {
      console.log(error);
    }
 );
}

Я не уверен, но я думаю, что вы могли бы использоватьвместо этого асинхронный канал использует вашу реализацию:

<div *ngIf="isAnimal$ | async">
     <p>animal</p>
</div>

Причина, по которой ваше решение не работает, заключается в том, что isAnimal$ является наблюдаемой, которую необходимо разрешить.Это может сделать асинхронный канал, но я предпочитаю, чтобы первое решение было честным.Мне не кажется естественным создание еще одной наблюдаемой of(true) в вашей подписке.