javascript - 选择 --> 选项，使用值与 ngValue

Question

我最近才发现 SELECT 的 OPTION 部分的 value 属性有一个替代方案，即 ngValue。文档确实缺少关于此的文档(我只能找到:https://angular.io/docs/ts/latest/api/forms/index/NgSelectOption-directive.html)。无论如何，这个想法是，当您为 ngModel 使用一个对象时，您可以使用 ngValue 并且它运行良好。否则，仅例如身份证已更新。如果我们只有一个字符串数组，那么 value 就足够了。以下是示例:

{{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