时间戳

首页 > 解决方案 > Angular 7选择选项选择执行两次

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

问题描述

我有这个模板

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

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

为什么 ？

标签： angularangular7

解决方案

[(ngModel)]应该设置selected选项，你不必使用[selected]. 如果您正在处理对象比较，则可以使用 提供比较器compareWith，或使用确切的对象引用作为值：

// Using exact object reference as value
currentServer.environment = environments.filter(e => e.name === 'dev')[0];

// Using custom comparator
<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>

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

推荐阅读