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，然后自己设置它。

我希望有一种方法可以按 track by 排序，所以最初的选择按 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 !!

希望这对您有所帮助!