javascript - Angular 2选择具有初始值的复杂对象

Question

在 Angular (2.2) 中，我尝试使用复杂对象初始化 select 。但由于该对象不是对 select 列表中某些内容的实际引用(即使它是相同的)，因此它不会将其识别为已选择。这是我正在处理的内容:

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

当您更改选择时，这将按预期工作。但在初始加载时，即使 model.object 与列表中的对象相同，它也不会选择任何内容。

解决此问题的两种方法是 (1) 遍历列表并将 model.object 交换为直接引用，但这是包含许多此类项目的表中的一行，因此那会非常昂贵。或者(2)绑定(bind) [(ngModel)]="model.object.id" 和 [ngValue]="object.id" (一个简单类型)，但我我确实希望在模型中表示整个对象，所以我仍然必须绑定(bind)到事件处理程序，遍历项目数组，直到找到该 id，然后自己设置它。

我希望有一种方法可以进行某种跟踪，因此初始选择是按 id 进行跟踪的。

在 Angular 1 中，这可以通过以下方式实现:

<select ng-model="model.object"
    ng-options="obj.id as obj.name for obj in objects">

但我似乎找不到等效的。

Answer 1

您可以尝试以下，

@Component({
  selector: 'my-app',
  template: `Angular
  <select (change)="chnageProduct($event.currentTarget.value)" >
  <option *ngFor="let obj of objects" [value]="obj"
   [selected]="model.name === obj.name"
   >{{ obj.name }}</option>
</select>
  `
})
export class AppComponent {
  result: any = {};

  constructor(){
  }

  model =  {name : "1"}


  objects = [{name : "1"},{name: "2"}]

  chnageProduct(val){
     this.model = val;
  }
}

这是Plunker !!

希望这有帮助!!