Question

我有一个下拉列表，其中包含2个“Used，New”值，并且根据您选择的那个值显示相关的文本输入英里/公里转换框。

输入里程转换为km，反之亦然 - 这很好。

导致问题的步骤： -

1）默认情况下选择使用 - 输入里程并转换公里 - 作品

2）从DD中选择新并输入里程值并转换公里数 - 作品

3）选择已使用并清除文本框中的所有值 - 工作

4）从DD中选择新， km 文本框仍然具有上次转换后的值，但里程文本框为空...问题

简而言之，转换为的最后一个值 - 在会话中持续存在 -

提前致谢...

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>

打字稿文件

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

删除下面的ConvertToKm和ConvertToMiles并检查传递的值和控件名称： -

 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;

    }


  }

Angular2输入类型缓存的最后一个值

1 个答案: