我有一个绑定到一系列客户的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/