Set default value for an ion-select-item dynamically - ionic-framework

Question

I'm having some mind blow working with ionic 4, I'm trying to set a default value for an ion-select-option dynamically but I'm not getting the correct behavior
I want to load the data into the ion-select and then assign the first value
HTML
<ion-header>
<ion-toolbar>
<ion-title>home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height: 30%;"></div>
<ion-item>
<ion-label>Ubicación</ion-label>
<ion-select [(ngModel)]="ubicacion" okText="Aceptar" cancelText="Cancelar">
<ion-select-option *ngFor="let ubicacion of ubicaciones">{{ubicacion.nombre}}
</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Fruta</ion-label>
<ion-select [(ngModel)]="selfruits">
<ion-select-option *ngFor="let fruit of fruits" [value]="fruit">{{fruit.name}}</ion-select-option>
</ion-select>
</ion-item>
<div style="height: 25%;"></div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-button expand="block" (click)="goForward('check-in')">Control</ion-button>
<ion-button expand="block" (click)="goForward('item-list')">Check list</ion-button>
</ion-toolbar>
</ion-footer>
TS
import { Component, OnInit } from '#angular/core';
import { NavController } from '#ionic/angular';
import { Maquina } from 'src/app/model/control/maquina';
import { ControlService } from 'src/app/services/control.service';
import { Ubicacion } from 'src/app/model/control/ubicacion';
import { GeneralService } from 'src/app/services/general.service';
#Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
ubicaciones: Ubicacion[]
ubicacion
constructor(
private navController: NavController,
private controlService: ControlService,
private generalService: GeneralService,
) { }
fruits = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'cherry' },
];
selfruits = [this.fruits[1]];
ngOnInit() {
this.fillUbicaciones()
}
fillUbicaciones() {
this.controlService.getUbicaciones().subscribe(x => {
this.ubicaciones = x
console.log("ubicaciones", x)
this.ubicacion = x[1]
})
}
changeUbicacion(value) {
console.log("changeUbicacion", value.detail.value);
// this.ubicacion = this.ubicaciones.find(x => x.nombre == value.detail.value)
}
goForward(action) {
this.generalService.goForward(action)
}
}
This is my data source : https://api.myjson.com/bins/191wsg

Answer 1

You are specifying the second element by using index 1, you should use this.fruits[0] to get the first item in the array.
fruits = [
{ id: 1, name: 'apple' }, // 0
{ id: 2, name: 'banana' }, // 1
{ id: 3, name: 'cherry' }, // 2
];
selfruits = [this.fruits[0]];
You don't need to wrap selFruits in an array, so you can just do:
selFruits = this.fruits[0];