<ion-option *ngfor> inside <ion-select> error

Ionic Framework ionic-v3
1

My object is:

image
image.png472×551 16.2 KB

But when i run this template:

<div *ngIf="question.units.length>1">
    <ion-item>
        <ion-select [(ngModel)]="Answers[i]" interface="action-sheet" cancelText="{{'cancel'|translate}}">
            <ion-option *ngFor="let unit of question.units" [value]="unit.UNIT_FACTOR" [selected]="unit.TYPE=='primary'? 'true':'false'">{{unit.TITLE}}</ion-option>
        </ion-select>
    </ion-item>
</div>
<div *ngIf="question.units.length<=1">
    <ion-item>
        {{question.units[0].TITLE}}
    </ion-item>
</div>

It show all item seperated by “,”?
image
And click to chose item, it selected all?

image
image.jpg357×597 29.8 KB

When i tested without *ngFor, it’s worked.
Please help me to correct the template.
Thank you so much.

2

@zakton5 please help!

3

@joshmorony, @rapropos please help me to solve this problem

4

Coud it be that unit_factor is always 1?

5

yes, two unit.UNIT_FACTOR is 1, so what does it mean?

6

I think value must be unique in the select. So try to use the index of the array as value.

7

Thank you, when i remove [value]=“unit.UNIT_FACTOR” it’s work.

8

Can someone help how to get ride of this? I am using same ngFor option. If i change for 1 it changes for all.
<ion-card *ngFor=“let adult of adult_generator” style=" background-color: white;padding: 5px;">

      <span class="content-header-text">Add concession for Adult {{adult.adultID}}</span>

        

      <ion-row style="padding:20px">

        <ion-col >

          <ion-select  class="content-text"

          style="border:1px solid #aaaaaa; 

          width:90%;

          margin:auto" 

          interface="popover" 

          selectedText="{{card_1}}" 

          [(ngModel)]="card_1" 

          okText="Okay" 

          cancelText="Cancel" 

          appNoArrow>

            <!-- <div class="content-text"   *ngFor="let card of adult.concession"> -->

              <ion-select-option class="content-text"  *ngFor="let card of adult.concession"  value="{{card.typename}}">

                <!-- <p > -->

                  {{card.typename}}

                  

                <!-- </p> -->

              </ion-select-option>

            <!-- </div> -->

          </ion-select>

        </ion-col>

        

      </ion-row>

                    

     </ion-card>