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

Angular 5，Clarity Design - 选择选项＆＃34;消失＆＃34;将新项目推送到选项数组时

1 个答案: