Using two *ngFor at the same time in the Ionic2-framework

Question

I am trying to use 2 *ngFor on the same ion-Row. I first tried it as follows:

<ion-row *ngFor="let mes of meses" *ngFor="let por of arrayPorc">
  <ion-col width-25>{{mes}}</ion-col>
  <ion-col width-25>{{por}}</ion-col>
  <ion-col width-25></ion-col>
  <ion-col width-25></ion-col>
</ion-row>

Then I tried that way:

<ion-row *ngFor="let mes of meses;let por of arrayPorc">
  <ion-col width-25>{{mes}}</ion-col>
  <ion-col width-25>{{por}}</ion-col>
  <ion-col width-25></ion-col>
  <ion-col width-25></ion-col>
</ion-row>

In neither of the two ways I was able to display the calculated values in Typescript. Note. I individually tested the arrays and they are working. The only question is how to display two arrays with *ngFor on the same ion-Row.

Has as?

Thank you very much!

Answer 1

If your two arrays are the same size, you can do the following:

<ion-row *ngFor="let mes of meses; let i = index">
  <ion-col width-25>{{mes}}</ion-col>
  <ion-col width-25>{{arrayPorc[i]}}</ion-col>
  <ion-col width-25></ion-col>
  <ion-col width-25></ion-col>
</ion-row>

But it will only work if the two arrays have the same amount of elements.