Angular 7 select option выбран дважды

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

Попробуйте использовать [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 2

[(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 3

Если вы просто хотите проверить обнаружение изменений, вы можете использовать stateChanges ( здесь ):

Поток, который излучается всякий раз, когда состояние элемента управления изменяется так, чтородительский MatFormField должен запустить обнаружение изменений.

Answer 4

это 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>