Ionic 4: сделать обновление формы самостоятельно с каждым вводом

Question

Я пытаюсь создать приложение для конвертации ионных единиц. При последней попытке я получил преобразование работающим, но это отразилось на 1 редактировании слишком поздно (например, я набрал бы «124», и оно показывало бы преобразование для «12», пока я не изменил бы значение снова, что покажет преобразование для «124» независимо от того, что стало новым значением.)

Ни мой наставник, ни я не могли понять, что стало причиной этой задержки. Я использовал простую привязку [(ngModel)], но она не работает как задумано. Как мне добиться этого эффекта?

У меня нет фрагментов кода, потому что я раздраженно начал все сначала, но у меня была функция, которая запускалась при изменении, которая должна немедленно обновить один из двух текстовых вводов.

РЕДАКТИРОВАТЬ: я перекодировал это с нуля, и столкнулся с той же проблемой, так что здесь вы идете:

convert.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>{{category.category}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <form>
      <ion-item>
        <ion-input id="usValue" type="numeric" [(ngModel)]="usValue" name="usValue" (ionInput)="convert()"></ion-input>
      </ion-item>
      <ion-item>
        <ion-select id="usUnit" [(ngModel)]="usUnit" name="usUnit" (ionInput)="convert()">
          <ion-select-option *ngFor="let us of category.usUnits; index as i" value="{{i}}">
            {{us.namePlural}}
          </ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-input id="siValue" type="numeric" [(ngModel)]="siValue" name="siValue"></ion-input>
      </ion-item>
      <ion-item>
        <ion-select id="siUnit" [(ngModel)]="siUnit" name="siUnit">
          <ion-select-option *ngFor="let si of category.siUnits; index as i" value="{{i}}">
            {{si.namePlural}}
          </ion-select-option>
        </ion-select>
      </ion-item>
    </form>
    {{usValue}}, {{usUnit}}, {{siValue}}, {{siUnit}}
  </div>
  <script>

  </script>
</ion-content>

convert.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Unit, Category } from '../../../assets/unitclass';
import { UNITDATA } from '../../../assets/unitdata';

@Component({
  selector: 'app-convert',
  templateUrl: './convert.page.html',
  styleUrls: ['./convert.page.scss'],
})
export class ConvertPage implements OnInit {
  index: number;
  category: Category;
  usValue = 1;
  usUnit = 0;
  siValue = 1; // will be initialized
  siUnit = 0;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.index = Number(this.route.snapshot.paramMap.get('category'));
    this.category = UNITDATA[this.index];
  }

  convert(){
    this.siValue = this.usValue * this.category.usUnits[this.usUnit].value / this.category.siUnits[this.siUnit].value;
  }
  convertBack(){
    this.usValue = this.siValue / this.category.usUnits[this.usUnit].value * this.category.siUnits[this.siUnit].value;
  }
}