如何计算并绑定到 Angular 中的多个输入字段

Question

我正在尝试将多个输入字段绑定在一起，但在这样做时遇到了问题。我基本上有多个输入字段，如果一个输入字段发生变化，那么其他输入字段也应该计算并反映值。它是一个长度单位转换器。这是我正在尝试的示例，可以在 w3schools 上找到：https://www.w3schools.com/howto/howto_js_length_converter.asp

这是我的代码：

HTML

公里

<mat-form-field class="form-field" appearance="outline">
    <mat-label> Meter </mat-label>
    <input matInput [(ngModel)]="meters" (change)="calculate()" type="number" />
</mat-form-field>

<mat-form-field class="form-field" appearance="outline">
    <mat-label> Centimeter </mat-label>
    <input matInput [(ngModel)]="centimeters" (change)="calculate()" type="number" />
</mat-form-field>

<mat-form-field class="form-field" appearance="outline">
    <mat-label> Yard </mat-label>
    <input matInput [(ngModel)]="yards" (change)="calculate()" type="number" />
</mat-form-field>

<mat-form-field class="form-field" appearance="outline">
    <mat-label> Miles </mat-label>
    <input matInput [(ngModel)]="miles" (change)="calculate()" type="number" />
</mat-form-field>

<mat-form-field class="form-field" appearance="outline">
    <mat-label> Inches </mat-label>
    <input matInput [(ngModel)]="inches" (change)="calculate()" type="number" />
</mat-form-field>

TS

  public kilometers = 0;
  public meters = 0;
  public centimeters = 0;
  public yards = 0;
  public inches = 0;
  public miles = 0;

  calculate() {
   this.kilometers = this.kilometers;
   this.kilometers = this.meters * 1000;
   this.kilometers = this.centimeters * 100000;
   this.kilometers = this.yards * 1094;
   this.kilometers = this.inches * 39370;
   this.kilometers = this.miles / 1,609;      
 }

注意：我无法使用任何库进行计算，因此我为每个计算创建了单独的方法，例如。公里到米等（现在刚刚完成公里转换，直到我可以让逻辑工作）。

我为她创建了一个 stackblitz 示例：https://stackblitz.com/edit/angular-9-material-starter-f1drwx?file=src/app/app.component.html

Answer 1

当用户输入一个值时，您需要调整所有其他值以匹配。您需要知道用户更改了哪一个，否则您将不知道用于确定所有其他值的值。

因此，对于每个字段，您添加一个处理程序 - 请注意，我使用的是 (input) 事件而不是 change，因为 input 将在您键入时更新。

centimeterChanged(){
    this.kilometers = this.centimeters * 100000;
    this.meters = this.centimeters * 1000;
    // set all others EXCEPT this.centimeters
  }

模板：

<mat-form-field class="form-field" appearance="outline">
    <mat-label> Centimeter </mat-label>
    <input
      matInput
      [(ngModel)]="centimeters"
      (input)="centimeterChanged()"
      type="number"
    />
  </mat-form-field>

已更新 stackblitz：https://stackblitz.com/edit/angular-9-material-starter-kbp3ni?file=src%2Fapp%2Fapp.component.ts

Answer 2

您可以为每个输入字段更改使用不同的方法。让我们以您的公里计算为例。方法应该是

  calculateFromKilometer() {
    this.meters = this.kilometers * 1000;
    this.centimeters = this.kilometers * 100000;
// do other conversion from kilometers
    }

您应该从公里文本框的（更改）事件中调用它

您可以对仪表文本框和方法执行相同的操作，如下所示

  calculateFromMeter() {
    this.kilometers  = this.meters * 0.001;
     this.centimeters = this.meters    * 100;
// do other conversion from meters 
    }

如何计算并绑定到 Angular 中的多个输入字段

How to calculate and bind to multiple input fields in Angular

javascript

calculator

angular-material

angular