尽管 *ngIf 评估为 false，异步管道仍在执行

Question

我在使用异步管道时遇到问题，因为我想要一个能够依赖于异步数据和静态数据的列表。然而，我不明白如何巧妙地做到这一点。

现在看起来像这样：

<ul>
  <li *ngIf="true" *ngFor="let item of list">{{item}}</li>
  <li *ngIf="false" *ngFor="let item of list | async">{{item}}</li>
</ul>

这里是非常烦人的部分，即使 *ngIf 为 false，异步管道仍会尝试执行它的操作。导致应用程序崩溃并抛出错误，指出异步管道的参数类型错误，因为它需要一个承诺而不是一个数组。

所以我的问题是，它为什么要这样做，什么是实现我想要的效果的更好、更正确的方法？

Answer 1

更改模型，以便即使您的数据是静态的，模板也可以观察到。这可以通过 Observable.of()

轻松完成

例如，假设您通常从 getData() 函数获取可观察对象，但是当数据是静态数据时，您从 getStaticData() 函数获取它。你会这样做：

型号

if(isDataStatic){
    //convert static data into an observable that emits that data
    this.list = Observable.of(this.getStaticData());
}else{
    //however you typically get the observable
    this.list = this.getData();
}

因此，list 将始终是可观察的，即使您的数据是静态的。模板可以保持简单。

模板

<ul>
  <li *ngFor="let item of list | async">{{item}}</li>
</ul>

尽管 *ngIf 评估为 false，异步管道仍在执行

Async pipe still executing despite *ngIf evaluating to false

asynchronous

angular2-pipe

angular