时间戳

首页 > 解决方案 > 带有比较功能的Angular 6 mat-select问题

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

问题描述

在我的 Angular 6 项目中，我有一个mat-select，我必须使用该compareWith功能，因为我正在选择对象。

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

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

PS 我不能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

标签： angularangular-material

解决方案

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

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

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

推荐阅读