angular - 如何从具有mat-slider属性的display中的组件获取值

我正在使用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)"

但在这种情况下，拇指标签将变为空，因此也无法使用。

有什么建议么？

最佳答案

formatRateLabel函数中的“this”指向滑块，而不是组件本身。

因此，您需要告诉它“this”应该是什么。
最简单的解决方案是

将.ts文件中的formatRateLabel更改为

之类的功能
formatRateLabel = (v: boolean) => { return (value: number) => { var myLocalVariable = v; ... // Do something } }

将.html文件中的formatRateLabel更改为

[displayWith]="formatRateLabel(someProperty)"
这样就可以将此变量someproperty传递到您的函数中。