Ion-select multiple="true" does not function within ngFor

Ionic Framework ionic-v3
1

Hello all.

I notice that when attempt to use ion-select within ngFor on a list that is set dynamically with a function, the lists did not get rendered to the DOM.

On the other hand, the DOM renders correctly if I take the individual element outside of the ngFor construct, OR if I do not use multiple=“true”.

Any suggestions on how to get around this? Thanks in advance.

Example:
1/ Fails to render:

 <ion-item *ngFor="let t of getMyListOfFields">
                        <ion-label>{{t.FieldName}}</ion-label>
                        <ion-input type="text" [(ngModel)]="t.FieldValue" *ngIf="!t.LookupID"></ion-input>
                        <ion-select multiple="true" [(ngModel)]="t.FieldValue" *ngIf="t.LookupID">
                            <ion-option *ngFor="let l of t.Lookups" [value]="l.ID">{{l.Text}}</ion-option>
                        </ion-select>
                    </ion-item>

2/ Renders correctly:

<ion-item>
                        <ion-label>Test List</ion-label>
                        <ion-select multiple="true" [(ngModel)]="model.TestItem.FieldValue"  *ngIf="model.TestItem && model.TestItem.LookupID">
                                <ion-option *ngFor="let l of model.TestItem.Lookups" [value]="l.ID">{{l.Text}}</ion-option>
                        </ion-select>
                    </ion-item>
2

Don’t use all those ngif’s. it will cause performance issues. Filter the list in the ts file, and ngFor over the already-filtered list. When I want to change filters dynamically, I use the async pipe in the template, and a getter Observable in the ts file. Example:

get filteredList(): Observable<Array<ListItemType>> {
  return observableThatEmitsDynamicallyFilteredList;
}
3

That is a good point. I have not gotten around that yet but notice that when I do use a static list instead of a function, the multi-select renders correctly.

Will use your suggestion next, thanks.