如何将 observable 转换为另一个 observable

Question

我从 Angular 6 的 Rxjs 开始，我对如何做到这一点有一些疑问：

我有一个卡片列表组件，它将显示从服务中获取的项目列表，该服务返回一个可观察的。数据类型项目不同。并且 service observable 可能会更新新项目，因此卡片列表应该显示这些新项目。

export class HomeComponent implements OnInit, OnDestroy {

  papers$:Observable<Paper[]>;

  papersPublished$:Observable<DataCard[]>;
  papersOnReview$:Observable<DataCard[]>;
  papersSubmitted$:Observable<DataCard[]>;

  constructor(private publicationService: PublicationService) { }

  ngOnInit() {
    this.papers$ = merge(
      this.publicationService.getAllPapersOnState("Submitted"),
      this.publicationService.getAllPapersOnState("OnReview"),
      this.publicationService.getAllPapersOnState("Published")
    );

        this.papersSubmitted$ = this.papers$.pipe(map(paper => [HomeComponent.paperToCard(paper,'Read', 'Review')]));
        this.papersOnReview$ = this.papers$.pipe(map(paper => [HomeComponent.paperToCard(paper,'Read', 'Accept')]));
        this.papersPublished$ = this.papers$.pipe(map(paper => [HomeComponent.paperToCard(paper,'Read', '')]));
      }

  private static paperToCard(paper, action_1_name, action_2_name): DataCard {
        // ... other code ...
  }
}

<app-cardlist
  [title]="'Published'"
  [description]="'Last science papers published. Yay!'"
  [items$]="papersPublished$"></app-cardlist>
<app-cardlist
  [title]="'On Review'"
  [description]="'Last papers on review. On publish way!'"
  [items$]="papersOnReview$"></app-cardlist>
<app-cardlist
  [title]="'Submitted'"
  [description]="'Last papers submitted for reviewing. Be the first one to check them!'"
  [items$]="papersSubmitted$"></app-cardlist>



export class PublicationService {
 // ... more code ...
 getAllPapersOnState(state: string): Observable<Paper[]> {
    return Observable.create(observer => {
      this.WF_SC.deployed().then(instance => {

        // State changed watcher to update on-live the observable
        const event = instance.AssetStateChanged({});
        event.on('data', (data) => {
          console.log('StateChanged catched!');
          this.getPaper((data['args']['assetAddress'])).then((paper) => observer.next(paper));
        });

        return instance.findAssetsByState.call(state);
      }).then(addresses => {
        addresses.forEach((address) => this.getPaper(address).then((paper) => observer.next(paper)));
      });
    });
  }
}


export class CardlistComponent implements OnInit {

  @Input() items$: Observable<DataCard[]>;

}

<div *ngIf="(items$ | async)" class="card-deck">
  <div *ngFor="let item of items$ | async" class="card" style="width: 18rem;">
    <!-- Other code -->
  </div>
</div>

问题是列表中只显示最后一项。如何将papers$:Observable<Paper[]> 转换为$papersSubmitted$:Observable<DataCard[]> 以便能够将其传递给CardlistComponent？

Answer 1

你可能想要这样的东西：

this.papersSubmitted$ = this.papers$.pipe(
  map((papers: Paper[]) => 
    papers.map((paper: Paper) => HomeComponent.paperToCard(paper, 'Read', 'Review')
  )
);

所有相似的都一样（当然你也应该过滤它们，正如你在 cmets 中提到的那样）。

然后，在您的服务中，执行以下操作：

return Observable.create(observer => {
  // ...
}).pipe(toArray());

返回Observable<Paper[]> 而不是Observable<Paper>。