Question

您好我有如下设置。会发生什么事情，每当我更改开尔文或摄氏度字段时，我会得到奇怪的输出，例如我输入的*1000，或者说到目前为止对我来说没有意义的事情。

任何人都可以帮忙吗？我对Angular 2很新。我想这与我如何进行绑定有关。

class Temperature {
  kelvin: number;

  constructor(kelvin: number) {
    this.kelvin = kelvin;
  }

  getKelvin(): number {
    return this.kelvin;
  }

  setKelvin(kelvin: number) {
    this.kelvin = kelvin;
  }

  getCelsius(): number {
    return this.kelvin - 273.15;
  }

  setCelsius(celsius: number) {
    this.kelvin = celsius + 273.15;
  }
}

export class ConverterComponent implements OnInit {
  temperature: Temperature;

  constructor() {
    this.temperature = Temperature.fromKelvin(21);
  }

  onKelvinChange(kelvin: number) {
    this.temperature.setKelvin(kelvin);
  }

  onCelsiusChange(celsius: number) {
    this.temperature.setCelsius(celsius);
  }


<input id="temperature-kelvin" type="number" class="form-control" [ngModel]="temperature.getKelvin()" (input)="onKelvinChange($event.target.value)" />
<input id="temperature-celsius" type="number" class="form-control" [ngModel]="temperature.getCelsius()" (input)="onCelsiusChange($event.target.value)" />

Answer 1

使用以下代码。您不需要[（ngModel）]因为您在Onchange中收到输入值。

温度模型

class Temperature {
  kelvin: number;

  constructor() {

  }

  getKelvin(): number {
    return this.kelvin;
  }

  setKelvin(kelvin: number) {
    this.kelvin = kelvin;
  }

  getCelsius(): number {
    return this.kelvin - 273.15;
  }

  setCelsius(celsius: number) {
    this.kelvin = celsius + 273.15;
  }
}

<强> Component.ts

export class ConverterComponent implements OnInit {
  temperature: Temperature;

  constructor() {
    this.temperature = new Temperature();
  }

  onKelvinChange(event) {
    this.temperature.setKelvin(event.target.value);
  }

  onCelsiusChange(event) {
    this.temperature.setCelsius(event.target.value);
  }

<强> HTML

<input id="temperature-kelvin" type="number" class="form-control" (keyup)="onKelvinChange($event)" />
<input id="temperature-celsius" type="number" class="form-control" (keyup)="onCelsiusChange($event)" />

Answer 2

我终于找到了它，这有点令人尴尬。 Typescripts方法参数不是以类型安全的方式转换为JS。那么在下面的方法中发生的事情不是数字的总和，而是字符串的串联，因为celsius来自输入字段的字符串。

setCelsius(celsius: number) {
  this.kelvin = celsius + 273.15;
}

通过在变量前面添加+作为一元运算符，可以轻松解决这个问题：

setCelsius(celsius: number) {
  this.kelvin = +celsius + 273.15;
}

Angular 2模型绑定

2 个答案: