угловое сравнение с не работающим в нематериальном выборе

Question

Я пытался переключиться с материальных элементов управления форм на «простые», но я не могу заставить метод compareWith работать с этой версией.

Я просмотрел множество (очень простых) примеров и попытался воссоздать максимально простой сценарий:

@Component({
  selector: 'app-root',
  template: `<form>
    <select [formControl]="plainControl" [compareWith]="comp">
      <option *ngFor="let option of options" value="option">{{option}}</option>
    </select>
    <mat-select [formControl]="matControl" [compareWith]="compMat">
      <mat-option *ngFor="let option of options" value="option">{{option}}</mat-option>
    </mat-select>
  </form>`
})
export class AppComponent {
  options = [1,2,3,4,5];
  plainControl = new FormControl({id: 3, name: 'foo'});
  matControl = new FormControl({id: 3, name: 'bar'});

  comp(o1: any, o2: any): boolean {
    console.log('Comparing Plain');
    return o1 == o2;
  }
  compMat(o1: any, o2: any): boolean {
    console.log('Comparing Material');
    return o1 == o2;
  }
}

mat-select правильно запускает функцию сравнения, тогда как обычныйselect нет.Это ошибка в угловой или я что-то упустил?

Я хорошо знаю, что это конкретное сравнение бесполезно, я просто хочу знать, почему обычная версия не срабатывает.

Моя версия Angular 7.1.0

Answer 1

Измените его с

<select [formControl]="plainControl" [compareWith]="comp">
  <option *ngFor="let option of options" value="option">{{option}}</option>
</select>

На

<select [formControl]="plainControl" [compareWith]="comp">
  <option *ngFor="let option of options" [ngValue]="option">{{option}}</option>
</select>

Пример здесь: https://angular.io/api/forms/SelectControlValueAccessor