ngModelの角の2つの変化がドロップダウンに反映されない

Question

ドロップダウンの変更に表示される確認ポップアップがある非常に単純なシナリオがあります。ユーザーがキャンセルを選択した場合は、以前の値に戻す必要があります。私は正しくやっていると思うし、DOMでも、selectで結ばれたngModelの値が反映されています。しかし、どういうわけか、選択した値を表示に戻していません。ここに私のコード私はchangeの代わりにすぎngModelChangeみました

<select style="display: inline-block;width: 20%" class="form-control" 
    name="selectedClientVersion" 
    (change)="selectedCurrentVersion($event.target.value)" 
      [(ngModel)]="selectedClientVersion"> 
      <option *ngFor="let i of clientVersions" 
      [selected]="i == 'selectedClientVersion' ">{{i}}</option> 
    </select> 

selectedClientVersion='version1'; 
    prevSelectedClientVersion='version1'; 
    clientVersions=['version1', 'version2', 'version3']; 
    selectedCurrentVersion(val){ 
    var r = confirm("Do you really want to chnage?"); 
    if (r == true) { 
     this.prevSelectedClientVersion= this.selectedClientVersion= val; 

    } else { 
     this.selectedClientVersion=this.prevSelectedClientVersion; 
     //return false; 
    } 
    } 

P.Sです。 アップデート：私はすでに同様の答えをStackOverflowの上で検索し、シナリオのどれもが、確認のポップアップの関与があります。この場合、ハンドルが見つかりませんでしたし、値がAngular 2

にそれに基づいて元に戻すする必要がありますしていますアップデート2：これは2角度でいえ、私が何をしたいです： Reset back to previous option on Select field if js Confirm returns false http://jsfiddle.net/CZ8F9/

Answer 1

に割り当てられていない私が思い付くことができソリューションは、以前の参照を作成することです選択されたオブジェクト/値を選択し、ngModelChangeがトリガするときに関数を渡します。私はコンポーネントからselectの値を設定する方法についていくつかの研究をしなければなりませんでした。ここに私の例のコードは次のとおりです。

HTML：

<select #selectBox 
      [(ngModel)]="selectedClientVersion" 
      (ngModelChange)="selectedCurrentVersion(prevSelectedClientVersion, selectedClientVersion, selectBox)" 
      (focus)="prevSelectedClientVersion=selectedClientVersion"> 
     <option *ngFor="let i of clientVersions" 
       [ngValue]="i"> 
      {{ i.value }} 
     </option> 
</select> 

component.ts：

selectedCurrentVersion(prevObj, currObj, selectbox){ 

    var r = confirm("Do you really want to change?"); 
    if (r == true) { 
     this.selectedClientVersionObj = currObj; 
    } 
    else{ 
     selectbox.selectedIndex = this.clientVersions.indexOf(prevObj); 
     this.selectedClientVersionObj = prevObj; 
     this.selectedClientVersion = prevObj; 
    } 

} 

Plunker demo

希望これは:)

Answer 2

あなたは空のオプション

を使用する必要があります

<select [(ngModel)]="selectedValue"> 
    <option [ngValue]="''"></option> 
     <option *ngFor="let value of values$ | async" 
       [ngValue]="value">{{ value }} 
     </option> 
    </select> 


reset(){ 
    this.selectedValue=''; 
    } 

注：あなたはngValueを使用していないアイテムを選択されなくてはngModel変数

LIVE DEMO