Angular 5，Clarity Design - 将新项目推送到选项数组时选择选项“消失”

Question

我正在开发一个使用 Clarity Design 作为 CSS 框架的 Angular 5 项目。

在一个选择上，我动态绑定了它的选项，当绑定一个新项目时发生了一件奇怪的事情。

基本上，新项目被添加到数据库中，在订阅回调中是完成绑定的地方。发生这种情况时，选择看起来好像没有选择任何选项，绑定正在正确进行，但视觉方面是我现在所坚持的。

以下是标记上的选择：

<div class="row">
    <div class="col-xs-12">
      <div
        class="select"
        [class.disabled]="contextResources.length < 1">
        <select
          [disabled]="contextResources.length < 1"
          (change)="emitSelectedResource(optionSelected)"
          [(ngModel)]="optionSelected">
          <option *ngIf="contextResources.length < 1">Agrega un {{ context.name | lowercase}} nuevo</option>
          <option
            *ngFor="let contextResource of contextResources"
            [ngValue]="contextResource">
          {{ contextResource.name }}</option>
        </select>
      </div>
    </div>
  </div>

以及组件方法：

addResource(): void {
    this.isLoading = true;
    this.resourceAdded = false;
    this.resourceError = false;

    let parentId = this.previousResource ? this.previousResource.id : null;

    this.resourceServices[this.currentStep].create({'newResource': this.newResource}, parentId)
      .finally(() => this.isLoading = false)
      .subscribe(
        response => {
          this.contextResources.push(response.json().newResource as ContextResource);

          if(this.contextResources.length == 1)
            this.emitSelectedResource(this.contextResources[0]);

          this.newResource = '';
          this.resourceAdded = true;
          this.emptyResources.emit(false);
        },
        (error: AppError) => {
          if(error instanceof BadRequestError)
            return this.resourceError = true;

          throw error; 
        }
      );
  }

这是选择某些选项时的样子，一切正常：

现在添加新项目后：

如果我们看一下列表内部：

有办法防止这种行为吗？

Answer 1

是的，contextResources 每次都是全新的对象，并且 select 默认根据引用相等性检查选定的对象。

答案是使用[compareWith] 输入，如下所述：https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

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