Question

我正在尝试使用空白模板创建ionic2应用程序。我在.html中有一个按钮，我想链接到我的函数Prediction（），它位于.ts文件中。我希望我的应用程序以这样的方式工作：当我单击按钮时，我的函数被调用，我得到一张卡片，告诉我函数计算的结果。用户需要输入他/她的全名和当前年龄。

以下是我的代码：对于.html文件

<ion-header>
  <ion-navbar color = "dark" text-center>
    <ion-title>
      Death Age Predictor
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>

  <ion-item required>
    <ion-label floating>Fullname</ion-label>
    <ion-input type="text" name="name" [(ngModel)]="name"></ion-input>
  </ion-item>

  <ion-item required>
    <ion-label floating>Current Age</ion-label>
    <ion-input type="text" name="current_age" [(ngModel)] = "current_age"></ion-input>
  </ion-item>

  <p><button (click)="Prediction()" ion-button block>Button</button></p>

</ion-list>

<ion-card>
  <ion-card-header text-center>
    Prediction Says
  </ion-card-header>
  <ion-card-content>
    {{ name }} will live upto {{ Prediction }} years of age.
  </ion-card-content>
</ion-card>

</ion-content>

用于.ts文件：

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  name = '';
  current_age;

  get Prediction()
  {
    var sum = 0;
    var name_letters = this.name.toLowerCase();
    for(var i = 0; i < name_letters.length; i++)
    {
      sum = sum + name_letters.charCodeAt(i);
    }
    var returned_age = sum % 101;
    if(this.current_age > returned_age)
    {
      var equated_age = this.current_age + returned_age;
      return equated_age % 101;
    }
    else
    return returned_age;
  }
}

Answer 1

你的函数不需要get，因为你没有将值返回到某个东西，你正在操纵值以显示在你的html中并且你正在使用双向数据绑定（使用[(ngModel)]）。

所以你的代码必须像这样

Prediction: number; // You'll need another var for the prediction
PredictionCalculator() // Rename so it doesn't throw and duplicate error
{
  var sum = 0;
  var name_letters = this.name.toLowerCase();
  for(var i = 0; i < name_letters.length; i++)
  {
    sum = sum + name_letters.charCodeAt(i);
  }
  var returned_age = sum % 101;
  if(this.current_age > returned_age)
  {
    var equated_age = this.current_age + returned_age;
    this.Prediction =  equated_age % 101;
  }
  else
  {
    Prediction = returned_age;
  }
}

由于我不知道你需要在{{ Prediction }}中显示什么，我不知道我的代码中的逻辑是否正确。但是，如果您没有将值分配给变量，则不需要返回值，只需要操作并将最终值分配给要在HTML中显示的变量。

希望这会有所帮助：D

修改

在您的HTML中，您可以执行此操作

<ion-content padding>
  <ion-list>

  <ion-item required>
    <ion-label floating>Fullname</ion-label>
    <ion-input type="text" name="name" [(ngModel)]="name"></ion-input>
  </ion-item>

  <ion-item required>
    <ion-label floating>Current Age</ion-label>
    <ion-input type="text" name="current_age" [(ngModel)]="current_age"></ion-input>
  </ion-item>

  <p><button [disabled]="(current_age == null || current_age == '') && (name == '' || name == null)" (click)="Prediction()" ion-button block>Button</button></p> <!-- the button will be disabled until the user enters a name and a age -->

</ion-list>

<ion-card *ngIf="Prediction != null"> <!-- The card will only show when the prediction variable have a value -->
  <ion-card-header text-center>
    Prediction Says
  </ion-card-header>
  <ion-card-content>
    {{ name }} will live upto {{ Prediction }} years of age.
  </ion-card-content>
</ion-card>

</ion-content>

在你的JS中，你只需要确保Prediction变量将获得一个值，在这种情况下，你的预测最终值。如果我不理解你的计算，我很抱歉，但是因为你知道该怎么做才能确保预测得到有效数字。

如何处理.html文件中按钮的单击事件到.ts文件中的函数，在ionic2中

1 个答案:

修改