SELECT - > OPTION,使用值vs ngValue

Question

我刚刚发现valueSELECT的OPTION部分有一个替代属性,即ngValue.文档真的缺乏关于此的文档(我只能找到: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所以,为什么Angular设置字符串的默认值,但不设置对象的默认值？什么是最优雅的解决方法？

Answer 1

你不需要"解决方法".当你这样做

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

您正在创建一个具有相同值的新对象,this.items[1]但它不是同一个对象,它是一个新对象.

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);

这就是你的选择无法在<option>列表中找到该值的原因.

为了解决这个问题,你必须使用适当的参考

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

plunkr