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;
  }
}

Ionic 4：使用每个输入自行进行表单更新

0 个答案: