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>

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

为什么？

Answer 1

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

Answer 2

尝试使用[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”应该是唯一的属性名称，您需要根据该属性名称来比较对象。

Answer 3

这是changeDetection（您可以尝试使用changeDetectionStrategy.OnPush，但需要阅读有关信息）。在开发模式下，检查是双重的。我不知道“ myFunction（）”的作用，但是为什么不使用“ [selected] =“ environment === currentServer.environment”“？

<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]="environment===currentServer.environment"
            >{{ environment.Name }}</option
          >
    </select>

Answer 4

如果您只想检查更改检测，则可以使用stateChanges（here）：

每当控件的状态发生更改以致父MatFormField需要运行更改检测时发出的流。

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

4 个答案: