Как получить значения из компонента в displaywith свойстве mat-slider

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 свойства функции моего компонента не определены.Как я понимаю, это проблема масштаба.Word 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

«this» в вашей функции formatRateLabel указывает на ползунок, а не на ваш компонент.

Итак, вы должны указать ему, каким должно быть «this».Самое простое решение -

1. изменить свой formatRateLabel в файле .ts, чтобы он был функционалом, таким как

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

измените formatRateLabel в вашем HTML-файле на

[displayWith]="formatRateLabel(someProperty)"

, чтобы эту переменную someproperty можно было передать в вашу функцию.

Answer 2

У вас есть несколько способов решить эту проблему, но самое простое и наиболее подходящее решение для устранения этой проблемы - использование выражения функции.Просто переопределите formatRateLabel следующим образом.

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

Надеюсь, это должно сработать.