角度2選択する配列を再バインドした後に選択値を保持

Question

元の選択された項目が新しい配列にあるときに項目の配列が「再読み込み」されているときに値を保持したいと思っています。デフォルトのオプション（空の値）。

私はあなたが選択した車を見ることができるの例ではplunkerにhere

を作成したが、まだあなたがリストを更新する場合でも、あなたが選択した車です。今度は、選択した車を選択し直すためのコードを追加する必要があります。

<select [ngModel]="selectedCar || ''" (ngModelChange)="setSelectedCar($event)"> 
    <option value="">--select a car--</option> 
    <option *ngFor="let car of cars" [ngValue]="car">{{ car.brand }} - {{ car.model }}</option> 
</select> 

<br> 
<br> 

<label>Selected car:</label> <span *ngIf="selectedCar">{{ selectedCar.brand }} - {{ selectedCar.model }}</span> <span *ngIf="!selectedCar">none selected</span> 

私は一方通行のバインディングを使用してngModelChangeを使用する理由は、デフォルト（--select A car--）機能を持つことができるようにすることです。

しかし、私はリストをリフレッシュするときに、選択（編集：in chrome）で空の選択値を取得します。

Answer 1

問題は、ドロップダウンをオブジェクトにバインドすることです。オブジェクトリストを変更すると、選択した値（オブジェクト）はリストになくなり、したがって再び選択することはできません。選択されたリストが変更された後、selectedCarを以前に選択されたオブジェクトに相当する適切な新しいオブジェクトに再度設定します。

この編集したplunker参照してください：あなたは、おそらくかなり再び右の車を見つけるためにIDのようなものを使用したい

ngOnChanges() { 
    if (this.selectedCar) { 
     this.selectedCar = this.cars.find(i => i.brand === this.selectedCar.brand 
      && i.model === this.selectedCar.model); 
    } 
} 

：src/select-widget.ts fileに私は、次のブロックを追加しましたかhttps://plnkr.co/edit/HKpBLx?p=preview

注意をしかし、これはあなたが途中で乗るのを助けるはずです。