RXJS/Angular:如何zip可观察的对象阵列

Question

我正在使用离子2和Angular2。现在，我有两个包含对象数组的观测值，并且正在传递给我的模板：

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 and score.total。当前，它显示所有分数，然后显示所有用户ID。可观察的阵列总是包含相同数量的项目。

用户和得分的模型为：

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));

将三个对象打印到控制台，这是正确数量的对象。但是每个都是对象{id：array [0]，总计：array [0]}

Answer 1

猜猜以下代码可以帮助您

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

注意：如果这不起作用，则需要您的样本JSON查找特定属性。基于我可以更新