Angular2 type d'entrée dernière valeur en cache

Question

J'ai une liste déroulante avec 2 valeurs "Utilisé, Nouveau" et en fonction de celui que vous sélectionnez les boîtes de conversion de miles/km d'entrée de texte pertinentes sont affichées.

Entrer des miles convertit en km et vice versa - cela fonctionne bien.

étapes menant à un problème: -

1) Utilisé est sélectionné par défaut - Entrez miles et km est converti - travaux

2) Sélectionnez Nouveau de DD et entrez une valeur de miles et km est converti - travaux

3) Sélectionnez Utilisé et toutes les valeurs dans les zones de texte défrichées - fonctionne

4) Sélectionnez Nouveau de DD et km zone de texte a encore la dernière valeur convertie mais les miles TextBox est vide ... PROBLÈME

En un mot la dernière valeur convertie - persiste dans la session -

Merci à l'avance ...

HTML

<select class="form-control" [(ngModel)]="SelectedCarType" > 
<option *ngFor="let c of CarTypes" [value]="c.CarTypeId"> 
    {{c.CarDescription}}</option> 
</select> 

<div *ngIf="SelectedCarType === 1" class="form-group" style="width:50%"> 
<label class="label label-info" for="Mileage">Mileage:</label> 
<input class="form-control" type="number" name="Mileage" id="Mileage" 
(input)="convertToKm($event.target.value,$event.target.id)" value="{{miles}} 
" /> 
</div> 

<div *ngIf="SelectedCarType ==1" class="form-group" style="width:50%"> 
<label class="label label-info" for="Kilometres">Kilometres:</label> 
<input class="form-control" type="number" name="Kilometres" 
id="Kilometres" 
(input)="convertToMiles($event.target.value,$event.target.id)" value="{{km}}" /> 
</div> 

<div > 
    <div *ngIf="SelectedCarType ==2" class="form-group" style="width:50%"> 
    <label class="label label-info" for="Mileage">Mileage:</label> 
    <input class="form-control" type="number" name="Mileage" 
    id="Mileage" (input)="convertToKm($event.target.value,$event.target.id)" 
    value="{{milesUsed}} " /> 
    </div> 

    <div *ngIf="SelectedCarType ==2" class="form-group" style="width:50%"> 
     <label class="label label-info" for="Kilometres">Kilometres:</label> 
     <input class="form-control" type="number" name="Kilometres" 
     id="Kilometres" 
     (input)="convertToMiles($event.target.value,$event.target.id)" 
     value="{{kmUsed}}" /> 
    </div> 

Ty pescript Fichier

export class Vehicle implements OnInit { 
public selectedCarClaimType: number; 
public CarClaimTypes: WarrantyClaimType[]; 
public km: number; 
public miles: number; 
public kmUsed: number; 
public milesUsed: number;  

convertToMiles(kmValue: string, id: string) { 
    let result: number = Number(kmValue); 
    this.miles = null; 
    this.milesUsed = null; 

    switch (id) { 
    case 'Kilometres': 
      this.miles = result/1.6; 
      this.milesUsed = null; 
      this.kmUsed = null; 
     break; 
    case 'KilometresTravelled': 
      this.milesUsed = result/1.6; 
      this.miles = null; 
      this.km = null; 
     break; 
    } 
} 

convertToKm(milesValue: string, id: string) { 
    let result: number = Number(milesValue); 
    this.km = null; 
    this.kmUsed = null; 
    switch (id) { 
    case 'Mileage': 
      this.km = result * 1.6; 
      this.kmUsed = null; 
      this.milesUsed = null; 

     break; 
    case 'MileageTravelled': 
      this.kmUsed = result * 1.6; 
      this.miles = null; 
      this.km = null; 

     break; 
    } 

Answer 1

Removed la ConvertToKm et ConvertToMiles avec ci-dessous et a vérifié la valeur transmise et le nom de contrôle: -

convert(searchValue: string, id: string) 
{ 
    if (searchValue === '') 
    { 
     if (id === 'Kilometres' || id === 'Mileage') 
     { 
     this.miles = null; 
     this.km = null; 
     } 
     else 
     { 
     this.milesUsed = null; 
     this.kmUsed = null; 
     } 
     return; 
    } 

    let result: number = Number(searchValue); 

    switch (id) { 
     case 'Kilometres': 
      this.miles = result/1.6; 
      this.km = result; 
     break; 
     case 'KilometresTravelled': 
      this.milesUsed = result/1.6; 
      this.kmUsed = result; 
     break; 
    case 'Mileage': 
     this.km = result * 1.6; 
     this.miles = result; 
     break; 
    case 'MileageTravelled': 
     this.kmUsed = result * 1.6; 
     this.milesUsed = result; 
     break; 

    } 


    }