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

你可以

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

stackblitz link

Answer 2

如何？

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

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

角度材质滑块无法显示值

3 个答案: