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

要在幻灯片时更新值，您可以使用change或input md-slider事件，并从event.value获取当前值。

更改事件。
输入事件

你可以根据自己的情况选择更好的一个。看看这个plunker。

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

1 个答案: