Question

我刚刚发现SELECT的OPTION部分有value属性的替代方法，即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，则不会在下拉列表中选择预定义值，而对于基元类型，则在加载时选择值。 E.g：

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

你不需要一个＆＃34;解决方法＆＃34;为了那个原因。当你这样做时

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

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

＆＃13;

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

＆＃13;

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

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

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

plunkr

Answer 2

为了使用[ngValue]获得默认的选定选项，可以使用[compareWith]。只需在compareObj方法中更改要比较的对象的正确属性即可。

<select [compareWith]="compareObj"  [(ngModel)]="selectedObject">
   <option *ngFor="let object of objects" [ngValue]="object">
      {{object.name}}
   </option>
</select>

compareObj(o1: Object, o2: Object) {
   return o1.id === o2.id;
}

选择 - ＆gt;选项，使用值与ngValue

2 个答案: