Angular 5、Clarity Design - Select options "disappear" when push new item to options array

Question

我正在与 Angular 5 合作，使用 Clarity Design 作为 CSS 框架。

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

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

下面是 select 在标记上的样子：

<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; 
        }
      );
  }

这是 select 带有一些选项的样子，一切正常：

添加新项目后现在：

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

有办法防止这种行为吗？

Answer 1

是的，contextResources每次都是全新的对象，select默认根据引用相等检查selected对象。

答案是使用 [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;
}

Angular 5、Clarity Design - Select options "disappear" when push new item to options array

Angular 5, Clarity Design - Select options "disappear" when pushing new item to options array

data-binding

select

angular

vmware-clarity