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

Question

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

我正在使用离子本地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）在按钮上显示为占位符值。

  

成功时出错callbackId：DatePickerPlugin1074986803：TypeError：   无法设置未定义的属性'startD'。
  未捕获的TypeError：无法设置未定义的属性'startD'

我是否知道在Ionic 2中是否有办法解决？

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

否则（使用胖函数），this与组件实例不对应。