typescript - Angular Material-slider kan ikke vise verdier

Jeg vil vise hvordan man kan ha en skyveknapp med Angular Material-biblioteket. Målet her er at når jeg skyver for å velge antall brukere på et abonnement, endres prisen dynamisk når jeg skyver tilbake eller fremover.

Jeg kan sette verdiene i min TS-komponent, men det endres ikke dynamisk i HTML, selv om jeg brukte dobbel bindsbraketter {{}}. Jeg er litt forvirret over hvorfor det ikke fungerer.

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() {

      }

}

Svar #1

Hva med dette:

<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>

Hvis du trenger tilgang til verdien i komponenten din, kan du binde til 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>

og i komponenten din:

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

Svar #2

Du kan gjøre

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

stackblitz-lenke

Relaterte artikler