Question

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

但在这种情况下，拇指标签变空，因此也不起作用。

有什么建议吗？

Answer 1

您几乎没有方法可以解决此问题，但是解决此问题的最简单，最合适的解决方案是使用函数表达式。只需按照以下方式重新定义formatRateLabel。

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

希望这应该可行。

Answer 2

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

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

将.ts文件中的formatRateLabel更改为功能，例如

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

将.html文件中的formatRateLabel更改为

[displayWith]="formatRateLabel(someProperty)"

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

Answer 3

我发现，最简单的方法是将此代码添加到组件的constructor函数中：

this.formatLabel = this.formatLabel.bind(this);

然后您的函数将与链接的this一起应用。

Answer 4

您尝试使用[[ngModel）]吗？

<mat-slider
   [(ngModel)]="sliderValue"
   (change)="onSliderChange()"
   thumbLabel
   tickInterval="1"
   min="0"
   max="4"></mat-slider>

然后在ts组件文件中可以使用类似的内容

sliderValue: number; 

ngOnInit() { 
   this.sliderValue= 3;
}

onSliderChange() {
  switch (this.sliderValue) {
     // do the thing
  }
}

Answer 5

有点晚了，但我发现这是一个更好的解决方案。只需将其绑定到 html 组件，如下所示：

<mat-slider thumbLabel [displayWith]="formatRateLabel.bind(this)">

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

5 个答案: