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

Question

我正在使用 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) 以在按钮上显示为占位符值时。

Error in Success callbackId: DatePickerPlugin1074986803 : TypeError: Cannot set property 'startD' of undefined.
Uncaught TypeError: Cannot set property 'startD' of undefined

我可以知道在 Ionic 2 中是否有任何解决方法？

Answer 1

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

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 不对应组件实例。

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

Bind callback function data to a button in Ionic 2

data-binding

cordova

ionic-framework

ionic2

angular