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（根據您的要求調整）時，您可以停止更新。

注意：您可能需要額外的空檢查。