Question

我在使用ionic 4时遇到一些麻烦，我试图动态设置ion-select-option的默认值，但是我没有得到正确的行为

我想将数据加载到ion-select中，然后分配第一个值

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

}

这是我的数据源：https://api.myjson.com/bins/191wsg

Answer 1

您要通过使用索引1指定第二个元素，应该使用this.fruits[0]来获取数组中的第一项。

fruits = [
  { id: 1, name: 'apple' },   // 0
  { id: 2, name: 'banana' },  // 1
  { id: 3, name: 'cherry' },  // 2
];
selfruits = [this.fruits[0]];

您不需要将selFruits包装在数组中，因此您可以这样做：

selFruits = this.fruits[0];

动态设置离子选择项目的默认值

1 个答案: