带有比较功能的Angular 6 mat-select问题答案

【问题标题】：Angular 6 mat-select issue with compare function带有比较功能的Angular 6 mat-select问题
【发布时间】：2018-11-29 10:14:03
【问题描述】：

在我的 angular 6 项目中，我有一个 mat-select，我必须使用 compareWith 函数，因为我正在选择对象。

但目前，如果我没有选择任何东西，似乎选择了第一个选项，我没有在该字段中手动设置任何值，我看到比较函数正在比较第一个选项......我不想要这种行为。正确的表单在此字段中仍有null 值。

这是预期的行为还是我遗漏了什么？

附：我无法将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

【问题讨论】：

我在stackblitz.com/angular/… 的控制台上尝试了 document.querySelector('select-overview-example').querySelector('mat-select').textContent 删除占位符后，我看到一个空的返回的字符串。你能分享一个plunker或其他东西，这可能真的有帮助。
@MKant stackblitz.com/edit/…

标签： angular angular-material

【解决方案1】：

您的compareWith 函数错误。您正在使用它，就像 Autocomplete 的 displayWith 函数一样，但它不是那样工作的。它接受两个参数并返回一个boolean 值。它的主要目的是从外部应用的值中找到匹配的选项，这在初始化时会自动发生，如果您使用表单控件，则表单控件的值用于初始化选择值。

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

所以你的函数本质上是说undefined 是第一个选项的匹配项，所以列表在启动时选择第一个选项。你可能根本不需要使用compareWith，所以把它去掉吧。

【讨论】：