How to use two * ngFor at the same time in the Ionic2-framework

Navigation
0

I'm trying to use 2 * ngFor in the same ion-row. First I tried the following: 

<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 this 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 these two ways have I been able to display the calculated values in TypeScript. Note. I tested the arrays individually and they are working. The only question is how to display two arrays with * ngFor in the same ion-row.

What is it like?

Thank you!

    
asked by anonymous 29.06.2016 / 15:31

1 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 both arrays have the same amount of elements.

    
29.06.2016 / 19:27
ActionResult and async Method Using FastMapper, Error in TypeAdpter Transparent Toolbar in an activity only