首页 文章

将回调函数数据绑定到Ionic 2中的按钮

提问于
浏览
0

我正在使用Ionic 2并尝试实现具有日期和时间字段的表单 .

我正在使用ionic-native DatePicker 来实现用户可以选择的日历 .

我的js文件是这样的:

import {DatePicker} from 'ionic-native';
constructor() {
  this.startD = "starting";
}
datePickerFrom(){
    let options = {
      date: new Date(),
      mode: 'date'
    }

    function onSuccess(date){
      console.log("Selected date: " = date)
      this.startD = date;
    }

    function onError(error){
      console.log(error);
    }

    DatePicker.show(options, onSuccess, onError);
  }

HTML:

<div>
      <button (click)="datePickerFrom()">S: {{startD}}</button>
      <button (click)="timePickerFrom()">T: {{startT}}</button>
  </div>

这就是我启动应用程序时的样子 .

但是,当我单击按钮以运行 datePickerFrom() 时,我可以获得所选日期 Selected date: Sat May 07 2016 00:00:00 GMT+0800 (SGT) 但在尝试绑定所选日期( this.startD )时获取 syntax error 以在按钮上显示为占位符值 .

成功中的错误callbackId:DatePickerPlugin1074986803:TypeError:无法设置undefined的属性'startD' . 未捕获的TypeError:无法设置undefined的属性'startD'

我是否知道在Ionic 2中有什么方法可以解决?

1 回答

  • 1

    我会使用箭头函数来使用上下文:

    datePickerFrom() {
      let options = {
        date: new Date(),
        mode: 'date'
      }
    
      DatePicker.show(options, (date) => {
        console.log("Selected date: " = date)
        this.startD = date;
      }, (error) => {
        console.log(error);
      });
    }
    

    否则(使用fat函数), this 与组件实例不对应 .

相关问题