Question

我从Angular 6的Rxjs开始，我对如何完成此工作有疑问：

我有一个卡片列表组件，它将显示带有从服务中获取的物品的列表，该物品返回可观察到的东西。数据类型项不同。可观察到的服务可能会更新新项目，因此卡列表中应显示该新项目。

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

您可能想要这样的东西：

var conn = new NpgsqlConnection(Db.connStr);
conn.Open();
using(conn)
{ // print something }

对于所有类似的对象都是相同的（当然，正如您在评论中提到的那样，您还应该过滤它们）。

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

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

返回return Observable.create(observer => { // ... }).pipe(toArray());而不是Observable<Paper[]>。

如何将可观测值转换为另一个可观测值

1 个答案: