関数から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

コンポーネントクラスで宣言されたパブリック変数は、そのコンポーネントのテンプレートで使用できます。あなたは、このようなクラスで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ヘッダーとして印刷できます。コンポーネントクラスからの変数は、そのコンポーネントのテンプレートページにのみスコープされていることに注意してください。

Answer 2

公的にアクセス可能な変数に代入（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 -->