Angular 7选择选项选择执行两次

Question

我有这个模板

<select
      [(ngModel)]="currentServer.environment"
      class="form-control form-control-sm component-form-control-color"
      id="inputGroupSelect01">
      <option
        *ngFor="let environment of environments"
        [ngValue]="environment"
        [selected]="myFunction()"
        >{{ environment.Name }}
      </option>
</select>

如果在我的 Controller 中 myFunction() 包含 à console.log() 并且如果我的环境数组包含 4 个元素，console.log 将被执行 8 次。

为什么？

Answer 1

尝试如下使用[compareWith]

<select
      [(ngModel)]="currentServer.environment"  [compareWith]="compareFn"
      class="form-control form-control-sm component-form-control-color"
      id="inputGroupSelect01">
      <option
        *ngFor="let environment of environments"
        [ngValue]="environment"     
        >{{ environment.Name }}
      </option>
</select>

然后在你的ts文件中添加以下函数

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

这里的“id”应该是唯一的属性名称，您需要根据它来对对象进行比较。