RxJS/Schräg: Wie beobachtbaren Arrays von Objekten zip

Question

I mit ionischen 2 und Winkel 2. Im Moment arbeite ich habe zwei Observablen, die Objekt-Arrays enthalten und zu meiner Vorlage übergeben werden angezeigt werden:

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

In meiner Vorlage muss ich sie zur Zeit getrennt angezeigt werden: jedoch

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

, würde ich diese Werte in der Lage sein mögen zusammen anzuzeigen, user.id und score.total, auf der gleichen Linie. Derzeit werden alle Bewertungen und dann alle Benutzer-IDs angezeigt. Die Observable-Arrays enthalten immer die gleiche Anzahl von Elementen.

Die Modelle für User und Score sind:

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

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

Mit Probe Postleitzahl von Aravind Antwort:

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

druckt drei Objekte an die Konsole, die die richtige Anzahl der Objekte ist. Jedoch jedes Objekt ist {id: Array [0], gesamt: Array [0]}

Answer 1

Raten Sie das unten Code hilft Ihnen

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

Hinweis: Wenn dies nicht funktioniert, benötigt, um Ihre Probe json aussehen für bestimmte Eigenschaften. Basierend auf dem kann ich aktualisieren