angular - 角度比较在非材料选择中不起作用

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

标签： angularangular-material

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