为什么在 http 调用后 select 下拉列表在 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

由于您正在处理具有 select.Model 绑定的对象，因此为了解决此问题，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>

component.ts

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

Answer 2

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

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

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

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

Why does select dropdown show empty default in Angular 8 after http call?

typescript

angular

angular8