角度材质滑块无法显示值答案

【问题标题】：Angular material slider cannot show values角度材质滑块无法显示值
【发布时间】：2019-03-13 20:55:41
【问题描述】：

我想展示一个带有角度材质库的滑块。这里的目标是，当我滑动以选择订阅的用户数量时，价格会在我向后或向前滑动时动态变化。

我可以在我的 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() {

      }

}

【问题讨论】：

让我们也试试我的答案。它的工作完美测试，而且你在 html 和 ts 方面都有价值。您可以进一步使用..
嗨，我试过了。它有效，但我检查的解决方案更简单并且可以满足我的需要。但也感谢您的解决方案

标签： angular typescript slider angular-material

【解决方案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;
}

【讨论】：

这行得通，谢谢先生。你能告诉我为什么我的解决方案不起作用吗？看起来几乎一样......
好吧，您在模板中绑定到{{amount}} 和{{user}}，但是这些值在您的代码中没有改变。它们只在构造函数中设置
打字稿中角码的哪一部分循环呢？ ngOnit 只执行一次，构造函数也执行一次？
循环是什么意思？
你正在处理我的消息来源并反对我。这真是太糟了。如果您不欣赏答案，请不要投反对票..

【解决方案2】：

你可以的

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

stackblitz link

【讨论】：

它正在工作。我已经用你的链接更新了 stackblitz 链接。

【解决方案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

我知道已经回答了，但这是一种正确的方法，而且你在打字稿中有价值，你可以进一步使用。

希望对你有用，

谢谢，穆图

【讨论】：

这有点矫枉过正，因为垫滑块正在发出这些事件，所以需要自己声明它们。
您正在处理我的消息来源并投反对票给我。这真是太糟了。如果您不欣赏答案，请不要投反对票
如先前评论中所述。您正在创建一个不需要的新输出，因为组件已经发出此事件。创建一个新的输出事件是没有意义的。但我会因为你的努力而取消反对票
我不能删除反对票，如果你对你的帖子做一个小的修改我可以
我也赞成这个，因为它有效。但它没有显示，因为我的代表很低