从函数检索到 HTML 页面的 ionic2 数据

Question

我有这段代码，我需要HTML页面中的datee1值，我该怎么做？

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-edcfromlmp',
  templateUrl: 'edcfromlmp.html'
})
export class EdcfromlmpPage {
    myDate: String = new Date().toISOString();
    constructor(public navCtrl: NavController, public navParams: NavParams) {}
    datechange(datee) {
        datee = new Date(datee);
        var datee1 = datee.setDate(datee.getDate() + 280);
        datee1 = new Date(datee1);
    }
    ionViewDidLoad() {
        console.log('ionViewDidLoad EdcfromlmpPage');
    }
}

Answer 1

将其分配给可公开访问的变量（this.variableName）

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-edcfromlmp',
  templateUrl: 'edcfromlmp.html'
})
export class EdcfromlmpPage {
    htmlDate: any; //create a variable
    myDate: String = new Date().toISOString();
    constructor(public navCtrl: NavController, public navParams: NavParams) {}
    datechange(datee) {
        datee = new Date(datee);
        var datee1 = datee.setDate(datee.getDate() + 280);
        datee1 = new Date(datee1);
        this.htmlDate = datee1; // assign it
    }
    ionViewDidLoad() {
        console.log('ionViewDidLoad EdcfromlmpPage');
    }
}

然后在您的 HTML 中只需调用

<p>{{htmlDate}}</p> <!-- will print [Object object] probably -->
<p>{{htmlDate | date: 'dd/MM/yyyy'}}</p> <!-- will print 26/01/2017 -->

Answer 2

在组件类中声明的公共变量可用于该组件的模板。你可以在类中创建一个名为datee1的公共变量，如下所示：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-edcfromlmp',
  templateUrl: 'edcfromlmp.html'
})
export class EdcfromlmpPage {
    datee1: Date
    myDate: String = new Date().toISOString();
    constructor(public navCtrl: NavController, public navParams: NavParams) {}
    datechange(datee) {
        datee = new Date(datee);
        var tempDate = datee.setDate(datee.getDate() + 280);
        this.datee1 = new Date(tempDate);
    }
    ionViewDidLoad() {
        console.log('ionViewDidLoad EdcfromlmpPage');
    }
}

然后，您可以在edcfromlmp.html HTML 模板页面中引用datee1。例如，您可以执行<h1>{{datee1}}</h1>将datee1变量打印为h1标头。请注意，组件类中的变量的作用域仅限于该组件模板页。