RxJS / Angular: how to pin observable arrays of objects

Question

I work with ionic 2 and angular 2. Now I have two observable objects that contain arrays of objects and are passed to my template for display:

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

In my template, I currently have to display them separately:

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

However, I would like to be able to display these values ​​together, user.id and score.total, on the same line. It currently displays all ratings, and then all user IDs. Observable arrays always contain the same number of elements.

User models and ratings:

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

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

Using the sample zip code from Aravind's answer:

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

displays three objects on the console, which corresponds to the number of objects. However, each of them is 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 .