Angular *ngif with Observable 和来自异步调用的数据

Question

我正在使用一些 REST 服务来收集数据，然后在我的组件代码中更改 Observable 的值。我正在尝试根据结果使用 *ngIf 到 show/hide 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);
         }
      });
}

我也试过创建一个简单的服务，但也没有用。像这样：Angular *ngIf binding to function

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) 对我来说似乎并不自然。

Angular *ngif with Observable 和来自异步调用的数据

Angular *ngif with Observable and data from async calls

observable

rxjs

angular

angular7