Angular2 选择了带有对象的选项

Question

我有一个与客户打交道的 Angular 2 应用程序和一个 spring 休息后端。客户对象有一个客户类型，它也是一个对象，我在客户表单上使用了下拉菜单，以便将对象存储为值，但是我不知道如何 select 正确将现有客户加载到表单时的客户类型。

<select  class="form-control" required [(ngModel)]="customer.customerType" >
   <option *ngFor="let ct of customerTypes" [ngValue]="ct">{{ct.customerType}}</option>
</select>

在上面的代码片段中，如果客户已有客户类型，则下拉列表不会 select 任何值。我记得使用 ngOptions 解决了 angular1 的相同问题：

<select ng-model="customer.customerType"
        ng-options="customerType.customerType for customerType in customerTypes 
        track by customerType.customerType" >
</select>

所以，我的问题是，如何复制 Angular1 在 Angular 2

中解决这个问题的方法

Answer 1

我建议您通过创建一个 select 组件来改变构建它的方法：

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
    selector: 'custype-selector',
    template: `
    <div>
        <label>Cust type</label>
        <select #sel (change)="select.emit(sel.value)">
            <option *ngFor="#custype of customertypes"> {{custype}} </option>
        </select>
    </div>`
})
export class CusTypeSelector {
    @Output() select = new EventEmitter();
    customertypes= ["type1", "type2"]

    ngOnInit(){
        this.select.emit(this.customertypes[0]);
    } 
}

我已将数组硬编码为 selector，但如果您愿意，您当然可以使用您的客户类型向组件添加一个输入参数

然后您可以像这样使用上面的组件：

<custype-selector (select)="custype = $event"></custype-selector>

Answer 2

我采用了一种稍微笨拙的方法，将 Customer 对象中返回的 CustomerType 实例替换为 CustomerType 数组中保存的实例。这只能在 Customer 和 CustomerTypes 从支持的返回后才能完成：

ngOnInit() {
    let id = this._routeParams.get('id');
    this._service.getCustomer(id).subscribe(customer => {
      this.customer = customer;
      this.updateCustomerType();
    });
    this._service.getCustomerTypes().subscribe(customerTypes =>{
      this.customerTypes = customerTypes;
      this.updateCustomerType();
    });
}
private updateCustomerType(): void{
  if(this.customer.customerType != null && this.customerTypes.length != null){
    for (var customerType of this.customerTypes) {
      console.log("Customer Type: ", customerType);
      if(this.customer.customerType.id == customerType.id){
        this.customer.customerType = customerType;
      }
    }
  }
}

Answer 3

我遇到了同样的问题，我是这样解决的：

<select  class="form-control" required [(ngModel)]="customer.customerType" >
   <option *ngFor="let ct of customerTypes" 
        [ngValue]="ct"   
        [attr.selected]="customer.customerType.customerType==ct.customerType ? true : null"
       >{{ct.customerType}}</option>
</select>

感谢Günter Zöchbauer

Angular2 选择了带有对象的选项

Angular2 selected option with objects

angularjs-ng-value

angular2-ngmodel

ngfor

angular