angular - 如果加载选项需要时间，则绑定(bind)选择的正确方法

Question

我在一个自定义组件中有一个选择，它从数据库加载了很多选项，我绑定(bind)了这样的选项:

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

在父组件中 ngOnInit我正在从数据库加载实体，我需要将 id 与选择中的选项绑定(bind)。如果选择内部(子)自定义组件花费太多时间来加载其选项，则绑定(bind)失败。
只有当自定义组件加载了他的数据时，有没有一种方法可以绑定(bind) id？

Answer 1

您可以在选择元素上使用 compareWith 输入。如果我们将 compareWith 函数提供给选择元素，那么 Angular 通过函数的返回值选择选项。
组件.html

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

组件.ts

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