How to set default value ion-select item? - html

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;
}