Взаимодействуйте двумя способами с помощью кнопки в Ionic 3

Question

Я делаю приложение в среде Ionic 3.Это базовое приложение для расчета.Я сделал два поля ввода и кнопку.Когда пользователь нажмет кнопку, две переменные будут рассчитаны.Это мой код в HTML.

    <ion-grid>
      <ion-row>
          <ion-col> 
             <ion-list>
              <ion-item>
                <ion-label floating>Ray (r)</ion-label>
                <ion-input type="number" [(ngModel)]="ray"></ion-input>
              </ion-item>        
            </ion-list>
            <ion-list>
              <ion-item>
                <ion-label floating>Time (T)</ion-label>
                <ion-input type="number" [(ngModel)]="circulationtime"> 
                </ion-input>
              </ion-item>        
            </ion-list>
          </ion-col>         
      </ion-row>
  </ion-grid>
    <button ion-button full (click)="calculateTwo(ray, circulationtime)">Calculate</button>

И вот мой код в машинописи:

calculateTwo(ray, circulationtime){
   this.result = "Speed: " + (2 * Math.PI * ray / circulationtime) + " m/s";    
  }

Я хочу, чтобы у пользователя было два способа взаимодействия с кнопкой:

1: он нажимает накнопка (работает) 2: он нажимает кнопку ввода на своей мобильной клавиатуре (проблема)

Я уже проверяю в Google, и есть событие под названием (keyup.enter) , но я не проверяюТеперь, как работает это событие.

Может ли кто-нибудь указать мне правильное направление?

С уважением

Answer 1

Я использовал (ngSubmit) в сочетании с примером тега <form>:

<form (ngSubmit)="calculateTwo(weight, speed)">
<ion-grid>
  <ion-row>
    <ion-col>
      <ion-list>
        <ion-item>
          <ion-label floating>Massa (m)</ion-label>
          <ion-input name="weight" type="number" [(ngModel)]="weight"></ion-input>
        </ion-item>
      </ion-list>
      <ion-list>
        <ion-item>
          <ion-label floating>Snelheid (v)</ion-label>
          <ion-input name="speed" type="number" [(ngModel)]="speed"></ion-input>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-grid>
<button ion-button full type="submit">Bereken</button>

Это прекрасно работает

Answer 2

вы захотите использовать @HostListener для обработки нажатий клавиш.вот как я использую мои хост-слушатели

  import {HostListener} from '@angular/core'

  @HostListener('document:keyup', ['$event'])
  handleKeyPress(event: KeyboardEvent) {
    if (event.key === 'enter') {
      this.result = "Speed: " + (2 * Math.PI * this.ray / this.circulationtime) + " m/s";   
    }
  }

Или вы можете повторно использовать функцию, которая у вас уже есть, и сделать это

  @HostListener('document:keyup', ['$event'])
  handleKeyPress(event: KeyboardEvent) {
    if (event.key === 'enter') {
      this.calculateTwo(this.ray, this.circulationtime);   
    }
  }