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

Asked

Viewed 701 times

0

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!

  • Try to put *ngFor="Let mes of meses | Let por of arrayPorc"

1 answer

2


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.

  • Thank you very much Marlon! Actually I needed to display 4 arrays with calculation results of a spreadsheet of financial costs. They all worked with your tip. Thank You Really!

  • @Tcury You’re welcome! :-)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.