In my Ionic 3 project, I am fetching two arrays through API calls. My goal is to display the data from both arrays in the same line like this:
[item1.1] [item2.1]
[item1.2] [item2.2]
[item1.3] [item2.3]Instead of displaying them like this:
[item1.1] [item1.2]
[item1.3] [item2.1]
[item2.2] [item2.3]I have experimented with various methods including using forkJoin and combineLatest, but they only show one array fully before moving on to the next.
Observable.combineLatest(this.arr1, this.arr2).subscribe(
(ValOne, ValTwo) => {
console.log(ValOne);
console.log(ValTwo);
}
);When I try to display the combined array in HTML, it does not maintain the correct order.
<div ion-item *ngFor="let x of (combinedArr | async)">
<h2>{{ x.name }}</h2>
<h2> {{ x.id }} </h2>
</div>I also attempted to show the data in two columns of a grid, but faced the same issue with the output.
<ion-grid>
<ion-row>
<ion-col *ngFor="let x of (arr1 | async);">
<div>
1 of 3 {{x.name}}
</div>
</ion-col>
<ion-col>
<div *ngFor="let y of (arr2 | async);">
2 of 3 {{y.id}}
</div>
</ion-col>
</ion-row>
</ion-grid>