2

I'm trying to generate multiple ion-select from an array in my view.

Explain :

I've an array like this : 

this.childrenTags = [
    [
        { 'id_tag': 1, 'label': 'test-1' }
    ],
    [
        { 'id_tag': 1, 'label': 'test-1' },
        { 'id_tag': 2, 'label': 'test-2' },
        { 'id_tag': 3, 'label': 'test-3' }
    ]
]

I want to generate ion-select in my view to have 2 selects for this var : one select displaying only "test-1" and a second displaying "test-1","test-2", "test-3"

I have a first loop doing this : 

<ion-row *ngFor="let parentLabel of parentsTags; index as k;">
     <ion-label stacked>{{parentLabel}} - {{k}}</ion-label>
     <tags-list-component [tagsList]="childrenTags" [index]="k"></tags-list-component>
</ion-row>

parentTags contain a simple array like ["Test 1","Test 2"].

My tags-list-component looks like : 

<ion-select id="children-tag-{{index}}" required cancelText="{{'buttons.cancel' | translate}}">
    <ion-option *ngFor="let tag of tagsList[index]" value="{{tag.id_tag}}-{{index}}">{{tag.label}} - {{index}}</ion-option>
</ion-select>

This solution display only and always 2 ion-select with value : "test-1","test-2", "test-3". It always get the last elements from childrenTags. Any idea why ? Thanks.

Akj
  • 7,038
  • 3
  • 28
  • 40
sKuD sKuD
  • 61
  • 7

2 Answers2

0

Every time your parent component pass the same index(k) to the tags-list-component. In your case it is last index. The reason is first *ngFor loop on parentTags finished its execution before executing the second *ngFor on childrenTags.

Sudarshana Dayananda
  • 5,165
  • 2
  • 23
  • 45
  • Thanks for your answer. I understand, but it's strange. I did a test with a simple html – sKuD sKuD Aug 24 '18 at 06:22
0

I found the solution : I'm using Ionic AlertController to generate an alert window with my checkbox inside like it says in the doc

sKuD sKuD
  • 61
  • 7