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

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

2 个答案: