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

Question

我正在使用Angular Material v6。 文档说它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此功能中的Word 只能访问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)" 

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

有什么建议么？

Answer 1

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

所以，你需要告诉它“这个”应该是什么。最简单的解决方案是

1. 将您formatRateLabel的 .ts 文件中的更改为函数式，例如

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

2. 将您formatRateLabel的 .html 文件更改为

[displayWith]="formatRateLabel(someProperty)"

以便可以将此变量someproperty传递到您的函数中。

Answer 2

解决此问题的方法很少，但解决此问题最简单、最合适的解决方案是使用函数表达式。formatRateLabel只需按以下方式重新定义即可。

formatRateLabel = (value: number) => {
    var myLocalVariable = this.someProperty;
}

希望这应该有效。