javascript - 在 Angular Material 自动完成显示中绑定(bind) 'this' 使用 Angular 5

Question

我在尝试使用 Material Angular 自动完成功能时遇到了 displayWith 函数，它显然可以用作选择时显示的输出。我想在显示函数中调用自定义函数，例如

displayFn(id) {
 return this.getValue(id)
}
getValue(id) {
 /**return some string
}

对于自动完成

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of outletFilterOptions | async [value]="option.outletId">
   {{ option.outletName }}
  </mat-option>
</mat-autocomplete>

如您所见，我使用 id 作为模型而不是整个对象。

当显示函数返回 this.getValue 未定义的错误时，我在 Stack Overflow 中搜索了解决方案，并建议我使用类似 [displayWith]="displayFn.bind(this)" .

但不幸的是，这对我也不起作用。我正在使用 Angular Material 5.1.0。

有什么我想念的吗？

Answer 1

displayFn = value => {
  // now you have access to 'this' 
  this.someMethod();
  return 'formatted display';
}