如何在离子2中使用html页面中的setter和getter

时间:2016-12-29 12:13:49

标签: angular typescript ionic2

我需要设置一个值(变量)并在执行某项特定任务后获得更改 我想分享我的系统环境,如下所示 -

<!DOCTYPE html><html><head><title>Apache Tomcat/8.5.9 - Error report</title><style type="text/css">h1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} h2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} h3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} body {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} b {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} p {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;} a {color:black;} a.name {color:black;} .line {height:1px;background-color:#525D76;border:none;}</style> </head><body><h1>HTTP Status 404 - /</h1><div class="line"></div><p><b>type</b> Status report</p><p><b>message</b> <u>/</u></p><p><b>description</b> <u>The requested resource is not available.</u></p><hr class="line"><h3>Apache Tomcat/8.5.9</h3></body></html>

我想用setter和getter来完成这项任务,看看我做了什么 -
mypage.ts -

******************************************************
Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68
******************************************************

这是html模板 -

import {NavController, NavParams, Content} from 'ionic-angular';
export class ListPage {
  constructor(private navCtrl: NavController, navParams: NavParams) {
    this.counter = 0;
  }
  public counter;

  getCounter(){
    return this.counter;
  }

  setCounter(count) {
    this.counter = count;
    // console.log(this.counter);
  }
}

我能够 获取值 ,该值为0,但不知道如何设置它。 我希望 设置值 而不用(点击)即使我使用了点击但我不知道怎么做没有点击< / em>的

这里是我见过的源URL列表 -

  1. How i can get input value within ionic 2 in my Component?
  2. Angular 2 call a function/method when an event is emitted
  3. How to call another components function in angular2
    清单2有点用,但无法帮助我。
  4. 希望得到帮助

2 个答案:

答案 0 :(得分:1)

查看链接 get and set in TypeScript

get Counter(){
    return this.counter;
  }

在HTML中

<div *ngIf="Counter== '0'">
<div (click)= "setCounter(Counter+1)>"

答案 1 :(得分:0)

以下示例每次访问页面时都会增加counter。每次查看页面时都会调用ionViewDidEnter。希望这是你喜欢的。

export class ListPage {
  constructor(private navCtrl: NavController, navParams: NavParams) {
    this.counter = 0;
  }
  public counter;

  ionViewDidEnter(){
    this.setCounter(this.getCounter() + 1 ) ;
  }

  getCounter(){
    return this.counter;
  }

  setCounter(count) {
    this.counter = count;
    // console.log(this.counter);
  }
}