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

可观察到的角度* ngif和来自异步调用的数据

1 个答案: