使用Angular 5在Angular Material自动完成显示中绑定'this' [英] Binding 'this' in Angular Material Autocomplete displayWith using Angular 5

查看:168
本文介绍了使用Angular 5在Angular Material自动完成显示中绑定'this'的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图使用材质角"自动完成功能,遇到了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的错误时,我在堆栈溢出中搜索了一种解决方案,并建议我使用类似[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)".

但不幸的是,这对我也不起作用.我正在使用角度材料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自动完成显示中绑定'this'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆