带有ngFor的Angular4异步管道

Question

我的组件中有这个ngFor：

<li *ngFor="let item of items$ | async">
     {{item}}
    </li>

这是我的组件代码：

this.items$ = Observable.of(true)
    .flatMap((shouldPresentNumbers) => {
      if(shouldPresentNumbers)
         return  Observable.forkJoin(Observable.of(1,2,3,4,5));
    });

我的目标是异步渲染项目。意味着我需要items$ 将获得Observable<Array<any>> 类型的对象。 不幸的是，在运行上面的代码之后，我只得到了一个 items$ 的可观察对象（最后一个值的可观察对象 -> 5）。

如何返回 [1,2,3,4,5] 的 Observable ？

Answer 1

好的，让我们讨论一下这个结构：

Observable.forkJoin(Observable.of(1,2,3,4,5))

Observable.of() 生成一个Observable，它连续发出 5 个项目。 fork-join 一直等到它完成，然后返回最后一项，即 5。您需要的是一个包含 5 项数组的 Observable：

Observable.of([1,2,3,4,5])

所以，你可以这样简化你的代码：

this.items$ = Observable.of(true)
    .flatMap((shouldPresentNumbers) => Observable.of(shouldPresentNumbers ? [1,2,3,4,5] : []));

Plunkr