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

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 函数中的“this”指向 slider 而不是组件本身。

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

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

formatRateLabel = (v: boolean) => {
返回(值:数字)=> {
var myLocalVariable = v;
...//做点什么
}
}


1. 将 .html 文件中的 formatRateLabel 更改为

[displayWith]="formatRateLabel(someProperty)"

这样这个变量 someproperty 就可以传递到你的函数中。