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）绑定[(ngModel)]="model.object.id"和[ngValue]="object.id"（一个简单类型），但我真的希望整个对象在模型中表示，所以我仍然必须绑定到事件处理程序，运行通过项目数组，直到我找到该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 !!

希望这会有所帮助!!

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

1 个答案: