绑定＆＃39;这个＆＃39;在Angular Material Autocomplete display中使用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

您可以将模板更改为

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn(id, this)">

模板this内部是对Component的引用。然后只需将您的功能更改为

displayFn(id, _this) {
  return _this.getValue(id)
}

如果[displayWith]需要是一个函数，您可以创建一个返回displayFn的属性，如下所示：

get createDisplayFn() {
  return (id) => {
    return this.getValue(id)
  }
}

并将绑定更改为[displayWith]="createDisplayFn"。由于ES6箭头功能无法重新绑定，this仍应是对您的组件的引用。

Answer 2

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

Answer 3

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

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

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

没有箭头功能

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

具有箭头功能

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

这项功能在我的情况下也适用于您的情况。

Answer 4

将cThis = this定义为您的类的属性，然后在displayFn函数中使用它：

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn(id, cThis)">

cThis = this;
displayFn(id, cThis) {
 return cThis.getValue(id)
}
getValue(id) {
 /**return some string
}

Demo显示displayWith

中的绑定

Answer 5

在使用属性之前，您错过了undefined检查。

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="optionSelected($event)">

<mat-option *ngFor="let user of users" [value]="user" >
    {{ user.first_name }} {{ user.last_name }}
</mat-option>

displayFn(user) {
    if (!user) return '';
    return user.name;
}