如何为Angular5 Material滑块实现有效的双向数据绑定？

嘿，我碰到过类似的问题，这其实是Angular数据绑定的小细节没处理到位！你现在的情况是滑块和组件变量只做了单向绑定，所以滑块拖动时，组件里的myValue没跟着更新，自然<h2>里的内容就不动啦。

问题根源 #

你应该是给<mat-slider>只绑定了初始值[value]="myValue"——这是单向数据流：组件变量把值传给滑块，但滑块的变化不会反向同步回组件变量。而滑块的thumbLabel是控件内部维护的状态，所以它自己会更新，但外部的<h2>拿不到最新值。

两种简单解决方案 #

方案1：用双向绑定（推荐，最简洁）

Angular的[(ngModel)]语法可以同时处理“组件→模板”和“模板→组件”的双向数据同步，直接修改滑块的绑定方式就行：

组件类代码不用改（保持myValue = 3），模板改成这样：

<h2>当前值: {{myValue}}</h2>
<mat-slider [(ngModel)]="myValue" thumbLabel min="0" max="10"></mat-slider>

这样拖动滑块时，myValue会自动同步更新，<h2>里的内容也会跟着实时变化。

方案2：手动监听滑块变化事件

如果你不想用ngModel，也可以通过监听滑块的change事件手动更新组件变量：

模板代码：

<h2>当前值: {{myValue}}</h2>
<mat-slider [value]="myValue" (change)="updateSliderValue($event)" thumbLabel min="0" max="10"></mat-slider>

组件类里添加事件处理方法：

updateSliderValue(event: any) {
  this.myValue = event.value;
}

当滑块拖动结束时，change事件会触发，把最新值传给组件的myValue，<h2>就会同步更新了。

额外注意点 #

如果用方案1的双向绑定，记得要在你的模块里导入FormsModule，不然ngModel会失效：

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

@NgModule({
  imports: [
    // 其他模块导入...
    FormsModule
  ]
})
export class YourModule { }

这样处理后，滑块和<h2>里的值就能完美同步啦！

内容的提问来源于stack exchange，提问作者Wouter Vandenneucker