如何设置默认值离子选择项？

Question

I need to set default value to ion-select item.

The ion-select above contain list of places, After choosing a place I save it into a localStorage.

What I need this localStorage be the default value of the ion-select,like this:

When the page is changed the ion-select return the placeHolder and no item is selected

CODE :

  <ion-item>
    <ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
      <ion-option class="text-input place-field" *ngFor="let place of places | async;let i = index" value="{{place.id}}"> 
        {{place.name}}
      </ion-option>
    </ion-select>
  </ion-item>

Answer 1

I found a solution to that.. add a AbstractControl to your [(ngModel)].

example:
in yout TS file..

placeForm: FormGroup;
placeId: AbstractControl;

constructor(){
  this.placeForm.formBuilder.group({
   placeId: ['', Validators.required],
  });
  this.placeForm.get('placeId').setValue(place.id);
}

in your html just add this [(ngModel)]="placeForm.placeId"

Answer 2

If you have the index value you can just fetch that from localstorage and when the page loads you can save it in a variable and then use it to bind to the selected property on ion-option:

html:

<ion-item>
  <ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
    <ion-option class="text-input place-field" *ngFor="let place of places | async;let i = index" [selected]="i == selectedIndex" value="{{place.id}}"> // the variable selected index will be a number and will select the item matching with the index from the array.
    {{place.name}}
    </ion-option>
  </ion-select>
</ion-item>

in ts:

selectedIndex: number;

constructor(){
  this.selectedIndex = localStorage.getItem('index') // 
}

Answer 3

I solved

the ion-select have the two way data binding with placeId

<ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
  <ion-option class="text-input place-field" *ngFor="let place of places | async;" value="{{place.id}}"> 
    {{place.name}}
  </ion-option>
</ion-select>

After Selecting a place I saved the id of the selected place inside the local storage. Then on the ionViewDidLoad() I init the the variable this.placeId

this.placeId = localstorage.getItem('foo')

and it work properly.

My mistake: I was saving the name of the place in the localstorage and not the id of the place

Answer 4

Thanks

In ionic 4

  ionViewDidEnter() {
    let parametros = this.navParams.get('parametros');
    this.cuentaBancaria.empresa._id = parametros.empresa;
    this.cuentaBancaria.moneda._id = parametros.moneda;
  }