[Angular 7 SELECT选项未在初始化时选择

Question

我有一个select，带有字符串option。当我从后端取回模型时，所选值不会在页面加载时填充。我将模型字符串与select中的选定项目进行比较，并返回true，这意味着它具有相同的值。这是我的代码：

<select name="province" class="form-control" [(ngModel)]="branch.PhysicalProvince">
   <option *ngFor="let p of branchService.provinces" [value]="p">{{p}}</option>
</select>

因此branch.PhysicalProvince是'Western Cape'，并且该值确实存在于branchService.provinces数组中。

如果我在HTML中执行branch.PhysicalProvince == branchService.provinces[1]，则显示true。

我也在[(ngValue)]="p"上尝试了option。

知道为什么不填充该值？

Answer 1

您需要检查您的整个html组件是否具有唯一的name属性，如果其他元素中具有相同的name属性，则Angular会丢失模型值。

Answer 2

使用compareWith函数：

<select name="province" class="form-control" [(ngModel)]="branch.PhysicalProvince"
   [compareWith]="compareFn">
   <option *ngFor="let p of branchService.provinces" [value]="p">{{p}}</option>
</select>

compareFn(compared1: { id: number }, compared2: { id: number }) {
    return compared1 && compared2 ? compared1.id === compared2.id : compared1 === compared2;
}