Angular2观察者

Question

我目前正在尝试在我的应用程序中设置三个不同的字段，其中每个字段更新时，其他两个更新相应。这里是我的代码：

import { Component } from "angular2/core"; 
import { FORM_DIRECTIVES, CORE_DIRECTIVES, ControlGroup, AbstractControl, FormBuilder } from "angular2/common"; 

@Component({ 
    selector: 'temperature-form', 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES], 
    template: ` 
     <form [ngFormModel]="temperatureForm"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="sizing-addon2">°C</span> 
       <input type="text" class="form-control" placeholder="Celsius" aria-describedby="sizing-addon2" [ngFormControl]="celsiusField" [(ngModel)]="celsius"> 
      </div> 
      <br /> 
      <div class="input-group"> 
       <span class="input-group-addon" id="sizing-addon2">°F</span> 
       <input type="text" class="form-control" placeholder="Fahrenheit" aria-describedby="sizing-addon2" [ngFormControl]="fahrenheitField" [(ngModel)]="fahrenheit"> 
      </div> 
      <br /> 
      <div class="input-group"> 
       <span class="input-group-addon" id="sizing-addon2">K</span> 
       <input type="text" class="form-control" placeholder="Kelvin" aria-describedby="sizing-addon2" [ngFormControl]="kelvinField" [(ngModel)]="kelvin"> 
      </div> 
     </form> 
    ` 
}) 
export class TemperatureForm { 
    temperatureForm: ControlGroup; 

    celsius: number; 
    fahrenheit: number; 
    kelvin: number; 

    celsiusField: AbstractControl; 
    fahrenheitField: AbstractControl; 
    kelvinField: AbstractControl; 

    constructor(formBuilder: FormBuilder) { 
     this.temperatureForm = formBuilder.group({ 
      'celsiusField': [''], 
      'fahrenheitField': [''], 
      'kelvinField': [''] 
     }); 

     this.celsiusField = this.temperatureForm.controls['celsiusField']; 
     this.fahrenheitField = this.temperatureForm.controls['fahrenheitField']; 
     this.kelvinField = this.temperatureForm.controls['kelvinField']; 

     this.celsiusField.valueChanges.subscribe(
      (value: number) => { 
       this.fahrenheit = this.celsiusToFahrenheit(value); 
       this.kelvin = this.celsiusToKelvin(value); 
      } 
     ); 

     this.fahrenheitField.valueChanges.subscribe(
      (value: number) => { 
       this.celsius = this.fahrenheitToCelsius(value); 
       this.kelvin = this.fahrenheitToKelvin(value); 
      } 
     ); 

     this.kelvinField.valueChanges.subscribe(
      (value: number) => { 
       this.celsius = this.kelvinToCelsius(value); 
       this.fahrenheit = this.kelvinToFahrenheit(value); 
      } 
     ); 
    } 

    celsiusToFahrenheit(celsius: number): number { 
     var fahrenheit: number; 

     fahrenheit = celsius * (9/5) + 32; 

     return fahrenheit; 
    } 

    celsiusToKelvin(celsius: number): number { 
     var kelvin: number; 

     kelvin = celsius + 273.15; 

     return kelvin; 
    } 

    fahrenheitToCelsius(fahrenheit: number): number { 
     var celsius: number; 

     celsius = (fahrenheit - 32) * (5/9); 

     return celsius; 
    } 

    fahrenheitToKelvin(fahrenheit: number): number { 
     var kelvin: number; 

     kelvin = this.celsiusToKelvin(this.fahrenheitToCelsius(fahrenheit)); 

     return kelvin; 
    } 

    kelvinToCelsius(kelvin: number): number { 
     var celsius: number; 

     celsius = kelvin - 273.15; 

     return celsius; 
    } 

    kelvinToFahrenheit(kelvin: number): number { 
     var fahrenheit: number; 

     fahrenheit = this.celsiusToFahrenheit(this.kelvinToCelsius(kelvin)); 

     return fahrenheit; 
    } 
} 

然而，问题是，在UI不断更新领域，和值的变化像疯了似的。有什么办法解决这个问题吗？我认为它由于默认值自动启动。但是，当我更新一个字段时，其他字段会被更新，但valueChange事件也会被触发，并且会无限地进行。任何解决方案

Answer 1

分区创建双打和双打根本不应该使用==或===进行比较，但Angular并不在意。所以你需要自己照顾这个。

this.celsiusField.valueChanges.subscribe(
     (value: number) => { 
      var farenheit = this.celsiusToFahrenheit(value); 
      if(Math.abs(farentheit - this.farenheit) > 0.0001) { 
       this.fahrenheit = farenheit; 
      } 
      var kelvin = this.celsiusToKelvin(value); 
      if(Math.abs(kelvin - this.kelvin) > 0.0001) { 
       this.kelvin = kelvin; 
      } 
     } 
    ); 

其他功能类似。

这样，当差异低于0.0001（根据您的要求调整）时，您可以停止更新。

注意：您可能需要额外的空检查。