Search code examples
angularionic3ion-select

Ionic 3 & Angular 4 : generate ion-select from 2 loops in view


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.


Solution

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