我使用的是Angular Material v6，Documentation表示displaywith是一个“用于在缩略图标签中显示值之前格式化值的函数”，它应该像这样使用：
<mat-slider thumbLabel [displayWith]="formatRateLabel" [value] = 'movie.mark'>
</mat-slider>在组件类中，我有一个formatRateLabel函数：
formatRateLabel(value: number) {
if (!value)
return 0;
return "HI!"; //just for demonstration
}我需要的是从那个函数里面得到我的组件的值。我通常通过在某个函数里面使用this关键字来做这样的事情。但是当我从那个fornatRateLabel函数里面做的时候，我的组件的属性是未定义的。据我所知，这是一种作用域问题。这个函数里面的单词this只能访问mat-slider的所有属性和函数。但是我需要从这个函数访问组件的属性，让我演示一下：下面是我的组件：
@Component({
templateUrl: './movieLibrary.component.html',
styleUrls: ['./movieLibrary.component.css']
})
export class MovieLibraryComponent{
someProperty : boolean = true;
formatRateLabel(value: number){
var myLocalVariable = this.someProperty;// debug showed it's as undefined. Why?
}
}我尝试过像这样将一些参数传递给formatRateLabel
[displayWith]="formatRateLabel(movie.mark)"但在这种情况下，缩略图标签变成了空的，所以也不起作用.
有什么建议吗？
5条答案
按热度按时间2eafrhcq1#
formatRateLabel函数中的“this”指向滑块，而不是组件本身。因此，您需要告诉它“this”应该是什么。
1.将.ts文件中的
formatRateLabel更改为函数，例如formatRateLabel = (v: boolean) => { return (value: number) => { var myLocalVariable = v; ... // Do something } }1.将.html文件中的
formatRateLabel更改为[displayWith]="formatRateLabel(someProperty)"这样变量
someproperty就可以传递给你的函数。e3bfsja22#
解决这个问题的方法不多，但最简单、最合适的解决方案是使用函数表达式。只需按以下方式重新定义
formatRateLabel。希望这能管用。
elcex8rz3#
我发现，最简单的方法是将以下代码添加到组件的
constructor函数中：那么您的函数将应用于右
this链接。jq6vz3qz4#
有点晚了，但我发现这是一个更好的解决方案。只要把这个绑定到html组件，就像这样：
zpgglvta5#
有点晚了，但我想这对将来遇到该线程并想知道什么需要显式绑定组件上下文的任何人都是有用的。
displayWith声明为@Input特性，从而实现Angular 材质零部件库中的箭头函数。此外，您还可以看到，
displayWith输入也在_updateValueIndicator方法内部被调用，_updateValueIndicator方法是拖动拇指时调用的函数链的一部分，正是这种调用福尔斯到用户定义的处理程序，这也会转移调用者的上下文，并在您自己的组件中的函数内浪费您自己的上下文。因此，如果希望使用组件中的变量（处理程序在组件中实现），则需要显式绑定组件的上下文。
我打开了一个Github issue，其中包含了对这个问题的描述，希望如果不重构这个片段，他们至少会在文档中提到它，因为我一开始也觉得有点混乱。