Javascript 如何将md输入绑定到md滑块值angular2

我正在开发一个带有Angular 2.0/meteor的应用程序，我不知道如何将输入绑定到md slider

以下是组件html：

<div class="panel-body">
   <form [formGroup]="filtreForm" #f="ngForm">
    <span class="panel-title"> <i class="glyphicon glyphicon-retweet">  Paramétrages 0 </i></span> 
    <md-slide-toggle>On</md-slide-toggle>
      <div *ngFor="let filtre of filtres | async">
          <div *ngFor="let filtr of filtre.arguments">   
            <span class="panel-title" > <i class="glyphicon glyphicon-retweet">  {{filtr.name}} </i></span>

            <md-input-container class="example-full-width" >
                <input mdInput placeholder="{{filtr.name}}" formControlName="{{filtr.name}}" value="{{filtr.value}}">
              </md-input-container>                                                    
          <md-slider
           thumb-label
           [min]="'0'"
           [max]="'200'"
           [value]="filtr.value">        
          </md-slider>
          </div>
      </div>

    <div class="btn-group  people-pager">
        <button type="button" class="btn btn-success btn-quirk" (click)="appliquerFiltre()"><i class="fa fa-tencent-weibo   Try it"></i>  Appliquer ce filtre</button>
    </div>
    </form>
  </div>

Paramétrages 0
在…上
{{filter.name}
贴花滤纸

以下是组件ts：

import {Component, ViewEncapsulation, OnInit, NgZone, Input} from '@angular/core';
import { Router } from '@angular/router';
import { Meteor } from 'meteor/meteor';
import { Observable } from 'rxjs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

//Collection import
import { Filtres } from '../../../../both/collections/filtres.collection';
import {Filtre} from "../../../../both/models/filtre.model";

import template from './tpl.dashboard.component.html';


@Component({
  selector: 'traitement_par_lot',
  encapsulation: ViewEncapsulation.None,
  template
})

export class TPLcomponent implements OnInit{

  filtres: Observable<Filtre[]>;    
  filtreForm: FormGroup;

   constructor(
    private formBuilder: FormBuilder, private router: Router
  ) {}

  ngOnInit(){
    this.filtreForm = this.formBuilder.group({
        spread:['',Validators.required],
        density:['',Validators.required],
        curviness:['',Validators.required],
        reseed:['',Validators.required],
    });

    this.filtres = Filtres.find({}).zone();
    console.log(this.filtres);
  }

  appliquerFiltre(){

  }

}

从'@angular/core'导入{组件、视图封装、OnInit、NgZone、输入}；
从'@angular/Router'导入{Router}；
从“流星/流星”导入{Meteor}；
从“rxjs”导入{Observable}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
//集合导入
从“../../../../both/collections/filters.collection”导入{filters}；
从“../../../../both/models/filter.model”导入{filter}”；
从“/tpl.dashboard.component.html”导入模板；
@组成部分({
选择器：'traitement_par_lot'，
封装：视图封装。无，
模板
})
导出类TPLcomponent实现OnInit{
过滤器：可观察；
改革：FormGroup；
建造师(
专用formBuilder:formBuilder，专用路由器：路由器
) {}
恩戈尼尼特（）{
this.filtreForm=this.formBuilder.group({
价差：[''，验证器。必填]，
密度：[''，验证器。必需]，
曲线度：[''，验证器。必填]，
重新设定种子：[''，需要验证程序]，
});
this.filters=filters.find（{}）.zone（）；
console.log（this.filters）；
}
贴花过滤器（）{
}
}

这不管用。现在，我可以从滑块中获得初始值，但当我滑动时，它不会改变

---

提前感谢在滑动时更新值，您可以使用

md slider

的

更改
或
输入
事件，并从其
事件值中获取当前值


change事件仅在幻灯片结束后触发
输入滑块值更改时，将立即触发事件

你可以根据自己的情况选择更好的。
看看这个。
谢谢，它的工作非常完美，但问题是现在我有4个滑块和4个输入，当我更改1个滑块时，4个输入会更改它们的值。你能帮我吗@pengyy@Dev你应该用一个特定的值来绑定它们。我该怎么做呢？我试着用一个值来绑定每个输入，但仍然是同一个问题@pengyy@Dev我有使用多个滑块更新plunker，再次检查。