如何將md-input綁定到md-slider值angular2

Question

我正在開發一個帶有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> 

這裏的組件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(){ 

    } 

} 

這是行不通的。現在我可以從滑塊的初始值，但它是當我滑到

在此先感謝

Answer 1

對於更新的價值，同時slidering，您可以使用md-sliderchange或input事件不會改變，並獲得它的當前值是event.value。

• change事件將在您滑動結束後纔會觸發。
• 輸入活動將在滑塊的值更改

，你可以選擇適合自己情況的更好的一個被立即解僱。 請看plunker。