javascript - Angular5 选择模型

Question

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

<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 作为“事件”。

属性 record.customer_id是数字类型，不是对象。有什么方法可以在 setCustomer 中获得整个客户实体吗？方法并保留对 record.customer_id 的绑定(bind)？

我在 Angular docu 上找到了一个方法 [compareWith]所以我尝试了:

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

不起作用。当我选择任何选项时，setCustomer被执行，record.customer_id获取选定的 ID。但是，在 select 失去焦点后，所选选项将重置为空白。

有一个我想避免的解决方法(在客户数组中迭代并通过 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


       }
    });
}

有什么建议吗？

谢谢!

Answer 1

不是绑定(bind) customer_id，而是绑定(bind)整个对象:

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