ionChange parameter to ion-range

Ionic Framework ionic-v3
1

Hi, Im new in ionic and have some problems.
I have nested ngfor to put some information in a ion-card.
So, my code look like this:

> ```
> > <ion-card *ngFor="let quest of quests; let i = index">
> >     <ion-card-header text-wrap>
> >       #{{ i + 1 }}
> >       {{ quest.title }}      
> >     </ion-card-header> 
> >     <ion-card-content>
> >       <ion-grid>
> >         <ion-row *ngFor="let subs of quest.subQuest; let j= index;trackBy: customTrackBy">
> >             {{ subs.title }}
> >             <hr>
> >             <ion-col  >
> >             <ion-range class = "item range range-calm"  align="left" min="0" max="5" step="1" pin="true"  [(ngModel)]= "subs.Valor" >
> >                <ion-label range-left>0</ion-label>
> >               <ion-label range-right>5</ion-label>
> >             </ion-range>
> >             </ion-col>
> >         </ion-row>
> >       </ion-grid>
> >     </ion-card-content> 
> >     
> >   </ion-card>

In component file I have a multi dimensional Array with quests and subQuests.
The number of subQuests per Quest is always 2, and the code works perfectly.
Now, I need “bind” the subQuests values, if I change the value of the first one,
the second must be updated, the sum of subQuests values will be zero or 5.
For example, the initial value is zero for both, if I change the first ion-range value to 1,
the second ion-range must be updated to 4.

I tried to set custom attributes with the quest index and subquest index
like "questIndex = ‘i’ subQIndex=‘j’ " and then use (ionChange) = “change($event)”
but the values I got were ‘i’ and ‘j’ literally and not the respectives indexes.
I Tried to send a parameter like (ionChange) = “change(i,j)” didn’t work too.

There is a way to pass that indexes and use it in change event?

2

try this:
let subs of quest.subQuest; index as j;trackBy: customTrackBy"

Now also please note if you hope the i in the upper part of your code will get interpolated - it won’t. As i is only defined later on in the structural directive (ngFor). You should work around this by introducing a var in the template for that

3

Thanks morphist, but that not worked. About the introduction of a var, there are 40 quests and each one have 2 subquests. The ion-range value is binding to the subquest value in the array, I cant create a var to do it, but maybe I can create an array, right?