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

角度比较无法在非物质选择中使用

1 个答案: