Angular 2模型绑定异常求助：温度转换输入值离奇倍数问题

嘿，我看到你遇到的问题了——输入框的值总是异常放大，其实根源出在输入值的类型处理和绑定方式上，咱们一步步来解决：

问题原因分析 #

你当前用的是单向[ngModel]绑定加上(input)事件监听，但$event.target.value返回的是字符串类型，而你的setKelvin和setCelsius方法期望接收的是数字。举个例子：
当你在摄氏度输入框输入21时，onCelsiusChange拿到的是字符串"21"，然后执行this.kelvin = "21" + 273.15——这时候JavaScript会把它当成字符串拼接，得到"21273.15"，之后开尔文输入框显示这个值，看起来就像是输入值被放大了1000倍，其实是字符串拼接搞的鬼！

另外，你的Temperature类里还缺了fromKelvin静态方法（你在构造函数里调用了，但代码里没实现），这也会导致初始化报错。

解决方案：两种修复方式 #

方式1：手动转换输入值类型 #

如果你想保留现有的事件绑定方式，只需要在传递参数时把字符串转成数字即可：

修改组件类的事件处理方法：

onKelvinChange(kelvinStr: string) {
  const kelvin = Number(kelvinStr);
  if (!isNaN(kelvin)) { // 避免非数字输入导致的错误
    this.temperature.setKelvin(kelvin);
  }
}

onCelsiusChange(celsiusStr: string) {
  const celsius = Number(celsiusStr);
  if (!isNaN(celsius)) {
    this.temperature.setCelsius(celsius);
  }
}

或者直接在模板里转换：

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

别忘了补充Temperature类的静态方法：

class Temperature {
  kelvin: number;

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

  // 补充静态方法
  static fromKelvin(kelvin: number): Temperature {
    return new Temperature(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;
  }
}

方式2：使用Angular双向绑定（更推荐） #

双向绑定[(ngModel)]是Angular处理表单输入的最佳实践，它会自动处理类型转换，代码也更简洁。我们可以在组件里封装对应的getter和setter：

修改组件类：

export class ConverterComponent implements OnInit {
  temperature: Temperature;

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

  // 封装kelvin的双向绑定属性
  get kelvin(): number {
    return this.temperature.getKelvin();
  }

  set kelvin(value: number) {
    if (!isNaN(value)) {
      this.temperature.setKelvin(value);
    }
  }

  // 封装celsius的双向绑定属性
  get celsius(): number {
    return this.temperature.getCelsius();
  }

  set celsius(value: number) {
    if (!isNaN(value)) {
      this.temperature.setCelsius(value);
    }
  }
}

然后模板简化成：

<input 
  id="temperature-kelvin" 
  type="number" 
  class="form-control" 
  [(ngModel)]="kelvin" 
/>
<input 
  id="temperature-celsius" 
  type="number" 
  class="form-control" 
  [(ngModel)]="celsius" 
/>

这样一来，不管你修改哪个输入框，双向绑定都会自动同步数值，还能避免类型错误，非常适合Angular新手使用。

内容的提问来源于stack exchange，提问作者Benny