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

我还尝试创建一个简单的服务，但也没有成功。像这样：Angular*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)对我来说似乎并不自然。