Ползунок углового материала не может отображать значения

Question

Я хочу показать слайдер с угловой библиотекой материалов.Цель здесь состоит в том, чтобы при скольжении, чтобы выбрать количество пользователей в подписке, цена динамически изменяется, когда я двигаюсь назад или вперед.

Я могу установить значения в своем компоненте ts, но он не изменяется динамически вHTML, но я сделал двойные скобки {{}}.Я немного запутался, почему это не работает.

subscriptioncomponent.html

<h1>Subscription</h1>
<h5>Choose how much user your account will have</h5>
<h5> {{amount}} Euro/month</h5>
<h5>{{user}} Users</h5>
<mat-slider 
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="auto"
  min="1"
  max="10"
  [(ngModel)]="value"></mat-slider>

subscriptioncomponent.ts

      export class SubscriptionchooseComponent implements OnInit {
      amount : number = 0;
      user : number = 0;
      value: number = 1;

      formatLabel(value: number | null) {
        if (!value) {
          return 0;
        }
        this.value = value;
        console.log(this.value);

        return value;
      }

      constructor() {

        this.user = this.value;
        this.amount = this.user * 9;

        console.log(this.amount);
        console.log(this.value);
       } 

      ngOnInit() {

      }

}

Answer 1

Как насчет этого:

<h1>Subscription</h1>
<h5>Choose how much user your account will have</h5>
<h5> {{value * 9}} Euro/month</h5>
<h5>{{value}} Users</h5>
<mat-slider thumbLabel tickInterval="auto" min="1" max="10" [(ngModel)]="value"></mat-slider>

Если вам нужен доступ к значению в вашем компоненте, вы можете связать его с input():

<h1>Subscription</h1>
<h5>Choose how much user your account will have</h5>
<h5> {{amount}} Euro/month</h5>
<h5>{{user}} Users</h5>
<mat-slider thumbLabel tickInterval="auto" min="1" max="10" (input)="changeValue($event)"></mat-slider>

и в вашем компоненте:

changeValue(event) {
    this.user = event.value;
    this.amount = event.value * 9;
}

Answer 2

Html,

<mat-slider 
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="auto"
  (valueChange)="onChange($event)" <!--Here added New One for get value -->
  min="1"
  max="10"
  value="value"></mat-slider>

Ts,

import { Component,Output,EventEmitter} from '@angular/core';

@Output() valueChange;
onChange(data){
    this.user = data;
    this.amount = this.user * 9;
}

Вот вывод,

Для получения дополнительной информации, https://material.angular.io/components/slider/api

Я знаю, что уже ответил, но вот способ сделать правильный путь, а также у вас есть значение в машинописи, которое вы можете использовать в дальнейшем.

Я надеюсь, что это полезно,

Спасибо, Muthu

Answer 3

Вы можете сделать

<mat-slider 
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="auto"
  min="1"
  max="10"
 [(ngModel)]="value" [ngModelOptions]="{standalone: true}"></mat-slider>

ссылка на стек *