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

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);
         }
      });
}

我还尝试创建一个简单的服务，但这也不起作用。像这样：Angular *ngIf 绑定到函数

Answer 1

我建议如下：

\n\n

HTML：

\n\n

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

\n\n

成分：

\n\n

public isAnimal: boolean = false;\n\nngOnInit() {\n  checkAnimal();\n}\n\nprivate checkAnimal() {\n  this._dataService.getData().subscribe(\n    (result) => {\n       if (result === \'animal\') {\n         this.isAnimal = true;\n       }\n    },\n    (error) => {\n      console.log(error);\n    }\n );\n}\n

\n\n

我不确定，但我认为您可以使用异步管道来代替您的实现：

\n\n

<div *ngIf="isAnimal$ |\xc2\xa0async">\n     <p>animal</p>\n</div>\n

\n\n

您的解决方案不起作用的原因是因为isAnimal$必须解决一个可观察的问题。异步管道可以做到这一点，但老实说我更喜欢第一个解决方案。对我来说，在您的订阅中创建另一个可观察对象似乎并不自然of(true)。

\n