使用Angular 5在Angular Material自动完成显示中绑定'this'

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材质5.1.0。

我有什么想念的吗？

Answer 1

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

Answer 2

这是因为这没有绑定到组件及其绑定到 mat-select 选项

现在要使用组件的功能，您必须使用箭头功能，首选方法或从 HTML 功能传递

我将使用箭头函数来使用组件的功能

没有箭头功能

displayFn(data: any) {
    return data.Id?this.sometask(data):''
}

带箭头功能

displayFn = (data: any) => {
    return data.Id?this.sometask(data):''
}

这在我的场景中有效，在你的场景中也有效。