ドロップダウンリスト - 値によるモデルバインディング - 角度2

Question

私は、ユーザーが車の色を更新できるページを持っています。 2つのapiコールがあります.1つはcar jsonオブジェクトを戻すコールで、もう1つはドロップダウンリストを埋め込むコールです。

私の問題は、角2は、値ではなく参照によってモデル結合を行うように見えるということです。これは、車に「緑」の色が設定されている可能性がありますが、そのオブジェクトが別のAPIコールから来たものとして一致する場合でも、ドロップダウンリストで「緑色」の色が選択されないことを意味します。

ここで選択リストはcarの 'color'プロパティにバインドされています。

<div> 
    <label>Colour</label> 
    <div> 
     <select [(ngModel)]="car.colour">  
      <option *ngFor="let x of colours" [ngValue]="x">{{x.name}}</option> 
     </select> 
    </div> 
</div> 

Iは、バックエンドでモデルを設定するとき、私は（緑色この場合は）同じ値のオブジェクトを持っている車の色を設定した場合、ドロップダウンが選択されていません。しかし、リストをバインドするために使用された値のリストから同じインスタンスを使用して設定すると、期待どおりに選択されます。

ここに問題を示すプランナーがあります。問題を説明するためにこれらの間を単に切り替えるだけです。

this.car.colour = this.colours [1]; //作品

this.car.colour = new Color（1、 'Green'）; //私は、このようにバインドするときに参照しない値でオブジェクトを比較して、角度取得できますか

https://plnkr.co/edit/m3xBf8Hq9MnKiaZrjAaI?p=preview

を失敗しますか？

よろしく

スティーブ

更新

私は、ドロップダウンリストを読み込むために使用されるリストに一致する項目にモデルの超大国 'プロパティを設定することで、私のユースケースにで解決しました。

setupUpdate(id: number): void { 

    this.pageMode = PageMode.Update; 
    this.submitButtonText = "Update"; 

    this.httpService.get<Hero>(this.appSettings.ApiEndPoint + 'hero/' + this.routeParams.get('id')).subscribe(response => { 
     this.hero = response;    

     this.httpService.get<SuperPower[]>(this.appSettings.ApiEndPoint + 'superPower/').subscribe(response => { 
      this.superPowers = response; 
      this.hero.superPower = this.superPowers.filter(x => x.id == this.hero.superPower.id)[0]; 
     }); 
    }); 
} 

Answer 1

これは設計通りです。 Angular2は、オブジェクトのプロパティを比較するのではなく、オブジェクトの参照のみを比較します。

あなたはColorは、文字列Greenを含むプロパティnameを持っていることを前提と

<select [(ngModel)]="car.colour.name">  
     <option *ngFor="let x of colours" [value]="x.name">{{x.name}}</option> 
    </select> 

を期待するとあなたはプリミティブ値、その後compairson作品に特異的に結合することができます。

car.colourを色で検索し、同じ色を表す色からcar.colourをColourインスタンスに設定して、自分自身で編集することもできます。

Answer 2

あなたは、むしろ「ngValue」より検証ディレクティブは、上で動作しないことを意味し、次の

<select [(ngModel)]="car.colour.name" (ngModelChange)="someFunction($event)" >  
    <option *ngFor="let x of colours" [value]="x.name">{{x.name}}</option> 
</select> 

選択した値が更新されるとき、あなたは「の値を」を使用しsomeFunction

で