SELECT - > OPTION、値を使用してngValue

Question

私は最近、ngValueのOPTION部分にvalueプロパティの代わりがあることを知りました。ドキュメントには、これに関するドキュメントが実際にはありません（私が見つけることができるのは、すべて：https://angular.io/docs/ts/latest/api/forms/index/NgSelectOption-directive.html）。とにかく、ngModelのオブジェクトを使用するときは、ngValueを使用すると効果的です。それ以外は、例えばIDが更新されます。文字列の配列を持っている場合は、値で十分です。ここでの例は以下のとおりです。

{{myModel | json}} 
<select [(ngModel)]="myModel"> 
    <option *ngFor="let i of items" [ngValue]="i">{{i.value}}</option> 
</select> 

<br /><br /> 

{{mySimpleModel}} 
<select [(ngModel)]="mySimpleModel"> 
    <option *ngFor="let i of simpleItems" [value]="i">{{i}}</option> 
</select> 

予想通り、これは動作しますが、両者の間に特徴的な違いがあります：ngValueを使用している場合は、事前に定義された値がプリミティブ型のに対し、ドロップダウンで選択されていない、値は読み込み時に選択されます。例えば：

items: any[] = [{id: 1, value: 'item1'}, {id: 2, value: 'item2'}, {id: 3, value: 'item3'}]; 
myModel: any = {id: this.items[1].id , value: this.items[1].value}; 

simpleItems: string[] = ['item1', 'item2', 'item3']; 
mySimpleModel: string = this.simpleItems[1]; 

は、ここで例を参照してください：https://plnkr.co/edit/JBrtmx7QkPZztBjaqYkS?p=preview だから、なぜ角はなく、オブジェクトのために、文字列のデフォルト値を設定していますか？最も洗練された回避策は何ですか？

Answer 1

「回避策」は必要ありません。あなたがthis.items[1]と同じ値を持っていますが、それはない同じオブジェクトである新しいオブジェクトを作成しているこの

myModel = {id: this.items[1].id , value: this.items[1].value}; 

を行うと、それは新しいものです。あなたの選択は<option>リストにその値を見つけることができない理由である

const items = [{id: 1, value: 'item1'}, {id: 2, value: 'item2'}, {id: 3, value: 'item3'}] 
 

 
const myModel = {id: 2, value: 'item2'}; 
 

 
console.log(items[1] === myModel);

。それを固定するために

は、あなたが適切な参照に

items = [ 
    {id: 1, value: 'item1'}, 
    {id: 2, value: 'item2'}, 
    {id: 3, value: 'item3'} 
]; 
myModel = this.items[1] 

plunkr