Angular 角度材质滑块无法显示值

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

我可以在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>

你能行

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

这个怎么样：

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

在您的组件中：

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

Html

这是输出，

作为更多参考，

我知道allready已经回答了，但这里有一个正确的方法，而且你们的打字脚本也有价值，你们可以进一步使用

我希望它有用

谢谢，

---

Muthu

它正在工作。我已经更新了stackblitz链接和您的链接。这正在工作，谢谢您，先生。你能告诉我为什么我的解决方案不起作用吗？它看起来几乎是一样的……好吧，你绑定到模板中的

{{amount}

和

{{user}}

，但是这些值在你的代码中没有改变。它们只在构造函数中设置。那么，在typescript循环中，角度代码的哪一部分呢？ngOnit只执行一次，构造函数也执行一次？你说循环是什么意思？你是在处理我的源代码，并对我进行向下投票。这很糟糕。如果你的答案不准确，请不要投反对票。让我们也试试我的答案。它的工作经过了完美的测试，而且你也得到了html和ts方面的价值。你还可以用……嗨，我试过了。它可以工作，但我检查的解决方案更简单，并且满足我的需要。但也谢谢你的解决方案，这有点过分了，因为垫子滑块正在发出这些事件，所以需要声明它们是你自己的。你正在处理我的来源，并向我投反对票。这很糟糕。如果你没有正确的答案，那么请不要否认在之前的评论中已经说过的话。您正在创建一个不需要的新输出，因为组件已准备好发出此事件。创建新的输出事件没有意义。但是我会删除下一票，因为你是effort，我不能删除下一票，如果你对你的帖子做一个小的编辑，我也可以投上一票，因为它是有效的。但它没有显示，因为我的代表太低了

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

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

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

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