6

我有一个与客户打交道的 Angular 2 应用程序和一个弹簧支架后端。客户对象有一个客户类型，这也是一个对象，我在客户表单上的下拉菜单工作，以便将对象存储为值，但是我不知道如何选择正确的客户类型时现有客户已加载到表单中。

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

在上面的代码片段中，如果客户已经有一个客户类型，那么下拉菜单不会选择任何值。我记得使用 ngOptions 解决了与 angular1 相同的问题：

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

所以，我的问题是，如何复制 Angular1 在 Angular 2 中解决这个问题的方式

4

3 回答 3

7

我有同样的问题，我以这种方式解决了它：

<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

于 2016-08-22T09:09:21.350 回答
0

我建议您通过创建一个选择组件来更改构建它的方法：

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]);
    } 
}

我已将数组硬编码到选择器中，但如果您愿意，您当然可以使用您的客户类型将输入参数添加到组件中

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

<custype-selector (select)="custype = $event"></custype-selector>
于 2016-06-09T21:33:43.880 回答
0

我采用了稍微笨拙的方法，将我的 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;
      }
    }
  }
}
于 2016-06-13T20:05:32.263 回答