使用Angular 5在Angular Material Autocomplete displayWith中绑定'this'答案

【问题标题】：Binding 'this' in Angular Material Autocomplete displayWith using Angular 5使用Angular 5在Angular Material Autocomplete displayWith中绑定'this'
【发布时间】：2020-01-31 22:57:10
【问题描述】：

我尝试使用 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。

我有什么遗漏吗？

【问题讨论】：

标签： javascript angular angular-material angular-material2 angular-material-5

【解决方案1】：

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

【讨论】：

这对我来说并不明显。我了解到箭头函数的不同之处在于它们总是根据定义它们的范围来建立“this”。
这救了我谢谢！

【解决方案2】：

这是因为 this 没有绑定到组件并且它绑定到 mat-select 选项

现在要使用组件的功能，你必须使用箭头函数，最好的方法或从 HTML 函数传递 this

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

没有箭头功能

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

带箭头功能

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

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

【讨论】：

【解决方案3】：

您可以将模板更改为

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

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

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

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

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

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

【讨论】：

我尝试了您的第一个建议，但我无法通过 displayFn 传递选定的 id。第二个建议使用函数本身设置我的显示值，例如 function { return this.... 打印在 DOM 中
这里的第二个选项（使用代理函数返回你的函数）对我有用。
@SriramJayaraman 我猜，你忘了函数定义前的get

【解决方案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 中显示绑定

【讨论】：

我查看了您的建议，但无法从 DOM 传递 id
id 是从哪里来的？
id 由 angular material 自动生成，无需传递任何此类参数
好的，我明白了，如果你只做[displayWith]="displayFn(cThis)" 会发生什么？
是的，我得到一个参数，这就是绑定到它

【解决方案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;
}

【讨论】：

我想在 displayFn 方法中调用另一个方法。