使用 Angular 5 在 Angular Material Autocomplete 显示中绑定“this" [英] Binding 'this' in Angular Material Autocomplete displayWith using Angular 5
问题描述
我试图使用 Material Angular 自动完成功能,但我遇到了 displayWith 函数,该函数显然可以用作选择时显示的输出.我想在显示函数中调用一个自定义函数,如
I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like
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
作为模型而不是整个对象.
As you see I am using the id
as the model instead of the entire object.
当显示函数返回 this.getValue 未定义的错误时,我在 Stack Overflow 上搜索了一个解决方案,并被建议我使用类似 [displayWith]="displayFn.bind(this)"
.
When the display function returned an error that this.getValue is undefined I searched Stack Overflow for a solution and was suggested that I use something like [displayWith]="displayFn.bind(this)"
.
但不幸的是,这对我也不起作用.我正在使用 Angular 材料 5.1.0.
But unfortunately, that isn't working for me either. I am using Angular material 5.1.0.
有什么我遗漏的吗?
推荐答案
displayFn = value => {
// now you have access to 'this'
this.someMethod();
return 'formatted display';
}
这篇关于使用 Angular 5 在 Angular Material Autocomplete 显示中绑定“this"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!