Question

我正在使用离子2和角度2.现在我有两个包含对象数组的observable并被传递给我的模板进行显示：

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查找特定属性。根据我可以更新

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

1 个答案: