Как обработать событие нажатия кнопки внутри файла.html для функции внутри файла.ts, в ionic2

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 переменная получит значение, в данном случае ваше окончательное значение прогноза. Извините, если я не понял ваши расчеты, но, поскольку вы знаете, что делать, просто убедитесь, что Prediction получает действительное число.