IonPicker 显示错误的值

Question

我正在制作一个显示选项数组的 selected 文本的 Ionic 应用程序，我正在使用 ion-picker 组件（互联网上的文档不多），一切正常，当我 console.log 索引的值在控制台中显示正确的值时，我也使用警报将 selected 值显示为消息的一部分，但是当我 select 例如第一个值警报显示没有值，然后如果我 select 第二个值警报显示第一个值，我不明白这是怎么回事，因为 console.log 有正确的价值。

这是我的两个功能。

async selectHora() {
    const times: PickerOptions = {
      cssClass: 'horasSelect',
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel',
          cssClass: 'btnCancel'
        },
        {
          text: 'Confirmar',
          handler: (value) => {
            value = this.horaSeleccionada;
            console.log('confirmacion', this.horaSeleccionada);
            this.confirmacion(value);
          }
        }
      ],
      columns: [
        {
          name: 'Horas',
          options: [
            {text: '8:00 - 9:00', value: 1},
            {text: '9:00 - 10:00', value: 2},
            {text: '10:00 - 11:00', value: 3},
            {text: '11:00 - 12:00', value: 4},
            {text: '12:00 - 13:00', value: 5},
            {text: '13:00 - 14:00', value: 6},
            {text: '14:00 - 15:00', value: 7},
            {text: '15:00 - 16:00', value: 8},
            {text: '16:00 - 17:00', value: 9},
            {text: '17:00 - 18:00', value: 10}
          ]
        }
      ]
    };
    const picker = await this.picker.create(times);
    picker.present();
    picker.onDidDismiss().then(async data => {
      const col = await picker.getColumn('Horas');
      console.log('Esta es la columna ', col);
      this.horaSeleccionada = col.options[col.selectedIndex].value;
      console.log(this.horaSeleccionada);
      // this.confirmacion();
    });
  }

async confirmacion(value) {
    const alert = await this.alertCtrl.create({
      header: 'Confirmación Pedido',
      subHeader: 'Si desea cambiar la hora, seleccione cancelar',
        message: 'Su pedido será entregado entre las ' + value,
        buttons: [
          {
            text: 'OK',
            handler: () => {
              console.log('ok texto', this.horaSeleccionada);
              // this.router.navigateByUrl('/orderfinished');
            }
          }
        ],
    });

    await alert.present();
  }

Answer 1

Hi i have resolved your issue

stackblitz.com

错误

value = this.horaSeleccionada;

正确的方法

this.horaSeleccionada =value;

工作示例

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AlertController } from '@ionic/angular';

import { PickerController } from '@ionic/angular';

export interface PickerOptions {
  buttons?: any[];
  columns?: any[];
  cssClass?: string;
  mode?: string;
  enableBackdropDismiss?: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent {
   horaSeleccionada:any;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private alertCtrl:AlertController,
    private picker:PickerController
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.selectHora(); 
    });
  }

  async selectHora() {

    const times: PickerOptions = {
      cssClass: 'horasSelect',
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel',
          cssClass: 'btnCancel'
        },
        {
          text: 'Confirmar',
          handler: (value) => {
             this.horaSeleccionada=value;
            console.log('confirmacion',  this.horaSeleccionada);
            this.confirmacion(value);
          }
        }
      ],
      columns: [
        {
          name: 'Horas',
          options: [
            {text: '8:00 - 9:00', value: 1},
            {text: '9:00 - 10:00', value: 2},
            {text: '10:00 - 11:00', value: 3},
            {text: '11:00 - 12:00', value: 4},
            {text: '12:00 - 13:00', value: 5},
            {text: '13:00 - 14:00', value: 6},
            {text: '14:00 - 15:00', value: 7},
            {text: '15:00 - 16:00', value: 8},
            {text: '16:00 - 17:00', value: 9},
            {text: '17:00 - 18:00', value: 10}
          ]
        }
      ]
    };
    const picker = await this.picker.create(times);
    picker.present();
    picker.onDidDismiss().then(async data => {
      const col = await picker.getColumn('Horas');
      console.log('Esta es la columna ', col);
      this.horaSeleccionada = col.options[col.selectedIndex].value;
      console.log(this.horaSeleccionada);
      // this.confirmacion();
    });
  }

async confirmacion(value) {
    const alert = await this.alertCtrl.create({
      header: 'Confirmación Pedido',
      subHeader: 'Si desea cambiar la hora, seleccione cancelar',
        message: 'Su pedido será entregado entre las ' + value,
        buttons: [
          {
            text: 'OK',
            handler: () => {
              console.log('ok texto', this.horaSeleccionada);
              // this.router.navigateByUrl('/orderfinished');
            }
          }
        ],
    });
}
}

Answer 2

看来你分配变量的方式不对value = this.horaSeleccionada; 错误 this.horaSeleccionada = value 正确你能检查一下吗&让我知道它是否有效

IonPicker 显示错误的值

IonPicker Showing wrong values

ionic-framework

angular

ionic4