Ion-select with *ngfor selects all options

Ionic Framework ionic-v3
#1

ticket.erstellen.html

<ion-item>
    <ion-label>Maschine</ion-label>
       <ion-select formControlName="maschine" [multiple]="false">
              <ion-option *ngFor="let maschine of maschinenArray" [value] = "maschine.typ" [selected]="selected(maschine.name)">{{maschine.name}}</ion-option>
       </ion-select>
</ion-item>

ticket.erstellen.ts

export class TicketErstellenPage {

  public ticketErstellen: FormGroup;

  maschinenArray: Maschine[] = [];
  selectedMaschine: string = "";


  constructor(private menu: MenuController, private formBuilder: FormBuilder, public navParams: NavParams) {
    this.menu.enable(true);

    this.maschinenArray = navParams.get('maschinenArray');    
    this.selectedMaschine = navParams.get('selectedMaschine');  

{...}

    })
  }

  selected(value: string) {
    
    console.log("selectedMaschine.name: "+this.selectedMaschine)
    console.log("Value: "+ value)
// executed ~15 times (seen in console)
//when tested, there where only around 3 values in the array
    if (this.selectedMaschine == value) {
      return true;
    }
    return false;

  }

}

park.html

{...}
<button ion-button color="secondary" icon-start (click)="goToTicket(maschine)">
      <ion-icon name="mail"></ion-icon>
          Ticket
</button>
{...}

park.ts

{...}
 goToTicket(maschine: Maschine){                        
        this.navCtrl.setRoot(TicketErstellenPage, {'maschinenArray': this.maschinenArray, 'selectedMaschine': maschine.name});
      }
{...}

Hi guys, I’m trying to generate in ‘ticket.erstellen.html’ a selectbox with the Maschinen Objects in the maschinenArray.
That works so far quite good, but I have the big issue that all Options are in the selectbox selected and i can’t even unselect one because it doesn’t save it if I click “save”.

With the selected function in ticket.erstellen.ts i try pre select the given value from the page before (park.html) you get to ticket.erstellen.html. With the console ouput, I experienced, that this function is executed like 15 times (see commentary).

I’m not sure what to do with the [(ngModel)] thing thats missing now in the element but i already tried around with it, but it didnt really help.

Any ideas what I’m doing wrong?

#2

I figured it out!

I’ll provide the Code to hopefully help someone else in the near future.

Selectbox in ticket.erstellen.html

<ion-item>
            <ion-label>Maschine</ion-label>
            <ion-select [(ngModel)]="selectedMaschine" formControlName="maschine" multiple="false">
                <ion-option *ngFor="let maschine of maschinenArray">{{maschine.name}}</ion-option>
            </ion-select>
        </ion-item>

ticket.erstellen.ts

export class TicketErstellenPage {

  public ticketErstellen: FormGroup;

  maschinenArray: Maschine[] = [];
  selectedMaschine: string = "";


  constructor(private menu: MenuController, private formBuilder: FormBuilder, public navParams: NavParams, private storage: Storage, ) {
    this.menu.enable(true);

    this.selectedMaschine = navParams.get('selectedMaschine'); 
{...}

Here you Setup the overgiven Parameter, which u habe to use as ur ngModel.

#3

I don’t see any sense in having both [(ngModel)] and formControlName on the same element. They will fight. Choose one or the other and be consistent about it throughout the page.

#4

I can’t find any other possibility to make it automaticlly selected the item and make it still required to choose a value if you go to this page manually.

#5

I’m sorry, but I can’t make any sense out of this. If you have a FormControl, use it. Get rid of [(ngModel)]. If you are trying to set an initial value for the control, set it in the FormControl.