帶有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] : []));

普倫克