Angular 2 模型绑定

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 模型绑定

Angular 2 Model binding

typescript

angular2-forms

angular