Angular 2 select 具有初始值的复杂对象

Question

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

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

当您更改 selection 时，这会按预期工作。但是在初始加载时，即使 model.object 与列表中的对象相同，它也不会 select 任何东西。

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

我希望有一种方法可以进行某种 track by，所以最初的 selection 通过 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!!

希望对您有所帮助！！

Angular 2 select 具有初始值的复杂对象

Angular 2 select complex object with initial value

javascript

angular2-forms

angular