角度比较不适用于非材料选择

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触发比较功能，而 plain 则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