我有一个绑定到一系列客户的Angular5<select>。见下文:

<select class="form-control" [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name="customer_id">
  <option *ngFor="let x of customers" [ngValue]="x.id">{{x.name}}</option>
</select>

在setCustomer函数中,我得到一个客户id作为“event”。
属性record.customer_id是数字类型,而不是对象类型。有什么方法可以在setCustomer方法中获得一个完整的客户实体,并保留对record.customer_id的绑定吗?
我在Angular docu上找到了一个方法,所以我试着:
<select class="form-control" [compareWith]="compareCustomer"  [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name="customer_id">
  <option *ngFor="let x of customers" [ngValue]="x">{{x.name}}</option>
</select>


compareCustomer(c1: customer, c2: number) : boolean {
   if (c1 == null || c1 == undefined) {
     return false;
   }

   if (c1.id == c2) {

     return true;
   }

   return false;
}

不起作用。当我选择任何选项时,[compareWith]将被执行,setCustomer将获得选定的id。但是,在选择失去焦点后,选定的选项将重置为空。
有一个解决方法(客户数组中的迭代和按id手动匹配)我要避免:
 setCustomer(event) {

    this.record.customer_id = Number.parseInt(event);

    customers.forEach(c => {

       if (c.id === this.record.customer_id) {

           // some logic with selected customer


       }
    });
}

有什么建议吗?
谢谢!

最佳答案

不要绑定客户id,而是绑定整个对象:

<select class="form-control" [ngModel]="record" (ngModelChange)="setCustomer($event)" name="customer_id">
  <option *ngFor="let x of customers" [ngValue]="x">{{x.name}}</option>
</select>

关于javascript - Angular5选择模型,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48743552/

10-12 12:56
查看更多