RxJS/Angular：如何压缩可观察的对象数组

Question

我正在使用 ionic 2 和 angular 2。现在我有两个包含对象数组的可观察对象，并且正在传递给我的模板以进行显示：

users: Observable<User[]>; scores: Observable<Score[]>;

在我的模板中，我目前必须单独显示它们：

<ion-card *ngFor="let score of scores | async" >
  <ion-item text-wrap>{{ score.total }} </ion-item>
</ion-card>

<ion-card *ngFor="let user of users | async" (click)="goToPlayer(user, league)">
<ion-item text-wrap>{{ user.id }}</ion-item>
</ion-card>

但是，我希望能够在同一行同时显示这些值，user.id 和 score.total。目前它显示所有分数，然后显示所有用户 ID。 Observable 数组总是包含相同数量的项目。

用户和分数的模型是：

export interface User {
id?: string,
email?: string,
leagues?: any[],
dateCreated: Date
};

export interface Score {
scores: any[],
total: number
};

使用 Aravind 回答中的示例邮政编码：

this.users = this.userData.loadUsers(this.league.id);
this.scores = this.leagueData.loadPlaylistScores(this.league.id);

Observable
.zip(this.users,
     this.scores,
     (id: number, total: number) => ({ id, total }))
.subscribe(x => console.log(x));

将三个对象打印到控制台，这是正确数量的对象。但是每个都是 Object {id: Array[0], total: Array[0]}

Answer 1

猜猜下面的代码对你有帮助

Observable
    .zip(users
         scores,
         (id: number, total: number) => ({ id, total }))
    .subscribe(x => console.log(x));

注意：如果这不起作用，则需要您的示例 json 来查找特定属性。我可以据此更新