如何将md-input绑定到md-slider值angular2

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

这里的组件的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(){ 

    } 

}

这是行不通的。现在我可以从滑块的初始值，但它是当我滑到

在此先感谢

来源

2017-04-03 Dev

对于更新的价值，同时slidering，您可以使用md-sliderchange或input事件不会改变，并获得它的当前值是event.value。

change事件将在您滑动结束后才会触发。
输入活动将在滑块的值更改

，你可以选择适合自己情况的更好的一个被立即解雇。请看plunker。

来源

2017-04-03 09:19:53 Pengyy

感谢它的工作完美，但现在的问题是，我有4个滑块和4个输入，当我改变1幻灯片4个输入改变它们的值你可以帮助我这个@pengyy – Dev

@Dev你应该绑定每个具体的值。 – Pengyy

我怎么能做到这一点，我试图绑定每个输入的值，但仍然是同一个问题@pengyy – Dev

如何将md-input绑定到md-slider值angular2

回答

相关问题