为什么在http调用后，选择下拉列表在Angular 8中显示为空默认值

Question

我已经编写了一个基本的html来在下拉列表中显示数组元素，而要显示的默认值是从ngOnInit中的http服务中获取的。但是我可以看到下拉列表中的默认值为空值。

这是我的Html:

<select class="form-control" name="chocolate"
[(ngModel)]="selectedChocolateId">
<option *ngFor="let chocolate of chocolates" [ngValue]="chocolate.id">
{{chocolate.name}}
</option>
</select>

这是我的打字代码：

public selectedChocolateId:number;
ngOnInit() {
this._chocolateService.GetChocolateId().subscribe(data => {
this.selectedChocolateId = data;
})
}
public chocolates = [
{ id:1, "name":"Diary Milk"},
{ id:2, "name":"Five star"}
];

当我运行代码时，我在下拉列表中得到一个空的默认值。但当我控制台日志时，我可以看到从服务获取的值。提前感谢！

Answer 1

数据很可能不是数字类型，因此无法找到正确的值。

https://stackblitz.com/edit/angular-twhj6x

只需在数据周围添加一个Number()

Answer 2

因为您使用select处理对象。模型绑定工作不正常，为了解决此问题，angular支持compareWith输入。其将函数作为一个值。compareFn函数，告诉Angular如何比较这些值。

试试这个：

component.html

<select [compareWith]="compareFn" class="form-control" name="chocolate"
[(ngModel)]="selectedChocolateId">
<option *ngFor="let chocolate of chocolates" [ngValue]="chocolate.id">
{{chocolate.name}}
</option>
</select>

组件.ts

compareFn(c1, c2): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}