合并/组合/将两个可观察的阵列连接到一个数组中，并在Ionic 3应用中使用NGFOR一起显示

Question

我在我的离子3项目中使用API调用接收两个阵列。我想在同一行中显示它们的数据，例如此

[item1.1] [item2.1] 
[item1.2] [item2.2] 
[item1.3] [item2.3] 

不喜欢这个

[item1.1] [item1.2] 
[item1.3] [item2.1] 
[item2.2] [item2.3]

我尝试了不同的方法，例如使用forkjoin以及CombineLatest，该方法完全显示了第一个数组，然后是第二个数组

Observable.combineLatest(this.arr1, this.arr2).subscribe(
          (ValOne, ValTwo]) => {
            console.log(ValOne);
            console.log(ValTwo);
          }
        );

我以这种方式在html中显示组合的数组，但没有正确的顺序

      <div ion-item *ngFor="let x of (combinedArr | async)">
            <h2>{{ x.name }}</h2>           
            <h2> {{ x.id }} </h2>
      </div>

另外，我尝试在网格的两列中显示它，但显示了相同类型的输出

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

Answer 1

您可以尝试这样的事情：

Observable.combineLatest(this.arr1, this.arr2).subscribe(
          ([ValOne, ValTwo]) => {
            const combinedArr = [];
            const length = Math.max(ValOne.lenght, ValTwo.length);
            for (let i = 0;i < length;i++) {
              combinedArr.push([ValOne[i], ValTwo[i]);
            }
          }
        );

组合中的每个项目都是一行，由代表列的另一个数组组成：

<ion-grid>
    <ion-row *ngFor="let cols of combinedArr;">
        <ion-col *ngFor="let col of cols;">
            <div>
                1 of 3 {{col.name}}
            </div>
        </ion-col>
    </ion-row>
</ion-grid>