要动态设置的 Mdl 滑块值答案

【问题标题】：Mdl Slider Value To Be Set Dynamicallty要动态设置的 Mdl 滑块值
【发布时间】：2017-03-17 12:59:37
【问题描述】：

您好，我的 angular2 组件中有一个简单的 mdl 滑块，我想从我的组件中动态设置滑块的值。我在这里做了一个 plunker 演示 https://plnkr.co/edit/jXMff0gIfrBp1EervBZt?p=preview ...如果我将滑块的值设置为html 它可以正确呈现，但是如果我分配一个变量并从组件控制滑块值，它就无法正常工作。

<input class="mdl-slider mdl-js-slider" type="range"
  min="0" max="100" value="sliderData" tabindex="0">

这是我的滑块 html，其中sliderData 是我保存值的变量。我已将sliderData 定义为12。有人可以告诉我如何正确设置滑块的值

【问题讨论】：

你的代码和angular2-mdl有什么关系？
哦...我在添加信息时没想太多

标签： angular

【解决方案1】：

看到这个plunker

这里我修改了以下内容：

在 app.ts 中导入关注

import { FormsModule } from '@angular/forms';

在 ngModule 中导入这个

FormsModule

在模板中添加 ngModel 的值

 [(ngModel)]="sliderData"

将模板中的数据显示为

{{sliderData}}

【讨论】：