Question

在我的angular 6项目中，我有一个mat-select，并且由于要选择对象，所以必须使用compareWith函数。

但是目前，如果我什么也没选择，那么我似乎没有在字段中手动设置任何值，并且我看到compare函数正在比较第一个选项...并且我不想这种行为。表单在此字段中仍正确具有null值。

这是预期的行为还是我错过了什么？

P.S。我无法在选项中添加null之类的选项。

html

<mat-form-field>
  <mat-select (selectionChange)="fareExceptionHandler(); setFareExceptionCode($event)" formControlName="fareException" [compareWith]="displayFn"
  placeholder="{{'ticket.new.labels.fareexception' | translate }}" name="fare">
     <mat-option *ngFor="let fare of fareExceptionsList" [value]="fare">
{{ fare.name }} </mat-option>
   </mat-select>
</mat-form-field>

比较功能

  displayFn(model: any) {
    if ((model !== undefined) && (model !== null)) {
      return model.name;
    }
  }

***************************************************编辑************************************************

这是一个类似的例子 https://stackblitz.com/edit/angular-rykism?file=app%2Fselect-overview-example.ts

Answer 1

您的compareWith函数错误。您可以像自动完成功能的displayWith函数一样使用它，但这种方式无法正常工作。它带有两个参数并返回一个boolean值。它的主要目的是从外部应用的值中找到匹配的选项，这些值在初始化时自动发生，并且，如果您使用表单控件，则表单控件的值将用于初始化选择值。

当参数对象相等时，默认实现返回true。您的实现返回第一个参数对象的name，它是一个选项。这是事实，因此您的函数最终在初始化时匹配列表中的第一个选项。第二个参数是传入的“设置”值，该值在初始化时为undefined（除非表单控件具有值）。

因此，您的函数实质上是说undefined是第一个选项的匹配项，因此列表在启动时选择了第一个选项。您可能根本不需要使用compareWith，所以就摆脱它。

具有比较功能的Angular 6垫选择问题

1 个答案: