Toma el siguiente html
<form [formGroup]="detailsForm"> <ion-list> <ion-item> <ion-label>Gaming</ion-label> <ion-select formControlName="gaming"> <ion-option value="nes">NES</ion-option> <ion-option value="n64">Nintendo64</ion-option> <ion-option value="ps">PlayStation</ion-option> <ion-option value="genesis">Sega Genesis</ion-option> <ion-option value="saturn">Sega Saturn</ion-option> <ion-option value="snes">SNES</ion-option> </ion-select> </ion-item> </ion-list> </form>Y en tu componente
this.detailsForm = this.formBuilder.group({ gaming:['nes',Validators.required] });Esperaría ver 'NES' como la opción seleccionada cuando se carga la vista. Sin embargo, no aparece. Si en su lugar usa [(ngModel)], funcionará.
¿Estoy haciendo algo mal o la actualización iónica más reciente ha causado este problema?
Cualquier ayuda sería genial.
Así es como resolví este problema (como todavía sucede en Ionic 3.5.0):
<ion-select class="form-select" [selectOptions]="stateOptions" [(ngModel)]="state" [ngModelOptions]="{standalone: true}" (ionChange)="stateChanged(state)" (click)="onSelectClicked()"> <ion-option *ngFor="let state of states">{{state}}</ion-option> </ion-select>Y el TypeScript correspondiente:
public onSelectClicked (): void { const options: HTMLCollectionOf<Element> = document.getElementsByClassName('alert-tappable alert-radio') setTimeout(() => { let i: number = 0 const len: number = options.length for (i; i < len; i++) { if ((options[i] as HTMLElement).attributes[3].nodeValue === 'true') { // This is the selected option options[i].scrollIntoView({block: 'end', behavior: 'smooth'}) } } }, 500) // Leave enough time for the popup to render }No sé si hay una manera de hacerlo con formularios, pero he estado usando un ng-model y funciona muy bien.
Mira el código a continuación:
<ion-list> <ion-item> <ion-label>Gaming</ion-label> <ion-select [(ngModel)]=gaming> <ion-option value="nes">NES</ion-option> <ion-option value="n64">Nintendo64</ion-option> <ion-option value="ps">PlayStation</ion-option> <ion-option value="genesis">Sega Genesis</ion-option> <ion-option value="saturn">Sega Saturn</ion-option> <ion-option value="snes">SNES</ion-option> </ion-select> </ion-item> </ion-list>y en el archivo .ts declare que el juego es una variable global llamando a esto antes del constructor
public gaming: any;y luego inserte el valor
$scope.gaming=['nes'];esto debería funcionar bien.
Es solo un problema con 3.1. Es un cambio importante al pasar todo el evento frente al valor como solía hacerlo, o tiene algo que ver con ionChange cuando el componente se carga antes de la interacción del usuario (o lo primero está causando lo segundo). Usa 3.0 por ahora.