Angular 如果加载选项需要时间，则绑定select的正确方法

我在自定义组件中有一个select，该组件从数据库中加载了许多选项，我绑定了如下选项：

 <select [id]="id" class="form-control" [formControlName]="id">
      <option *ngFor="let p of items | async" [value]="codeKey">
            {{ p[labelField] }}
      </option>
  </select>

{{p[labelField]}

在parent component

ngOnInit

中，我正在从数据库加载实体，我需要使用select中的一个选项绑定id。如果选择内部（子）自定义组件花费太多时间加载其选项，则绑定将失败

---

是否有一种方法仅当自定义组件加载了其数据时才绑定id？

您可以在选择元素上使用compareWith输入。如果我们给compareWith函数选择元素，那么Angular会根据函数的返回值选择选项

component.html

<select [compareWith]="compareFn"  [id]="id" class="form-control" [formControlName]="id">
      <option *ngFor="let p of items | async" [value]="codeKey">
            {{ p[labelField] }}
      </option>
 </select>

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