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为假，异步管道仍会尝试做它的事情。导致应用程序崩溃并抛出一个错误，指出异步管道的参数类型错误，因为它需要一个promise而不是一个数组。

所以我的问题是，为什么会这样做，什么是更好，更正确的方式来实现我想要的？

Answer 1

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

轻松完成

例如，假设您通常从getData()函数获取observable，但是当数据是静态的时，您可以从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，异步管道仍在执行

1 个答案: