Angular 4将多个组件绑定在一起ngFor

Question

我正在使用DevExtreme范围滑块，我想遍历我的columns数组以动态创建范围滑块。

我在这里继例如：DevExtreme Range Slider Angular Demo

我不知道该怎么给每个范围滑块，其开始&终值文本框绑定。

component.html

<ng-template ngFor let-column [ngForOf]="columns" let-i = index;> 

<div class="dx-fieldset" *ngIf="column.is_integer" > 
    <div class="dx-field"> 
     <div class="dx-field-label">{{column.name}}</div> 
     <div class="dx-field-value"> 
      <dx-range-slider 
       #rangeSlider 
       [min]="column.min" 
       [max]="column.max" 
       [start]="column.min" 
       [end]="column.max" 
       [rtlEnabled]="false" 
       [tooltip]="tooltip" 
       (onValueChanged)="quick_filter($event, column.name)" 
      ></dx-range-slider> 
      <dx-number-box 
       [min]="column.min" 
       [max]="column.max" 
       [(value)]="rangeSlider.min" 
       [showSpinButtons]="true" 
       name="{{column.name}}_start" 
      ></dx-number-box> 
      <dx-number-box 
       [min]="column.min" 
       [max]="column.max" 
       [(value)]="rangeSlider.max" 
       [showSpinButtons]="true" 
       name="{{column.name}}_end" 
      ></dx-number-box> 
     </div> 
    </div> 
</div> 


</ng-template> 

如何改变#rangeSlider每个column.name的ngFor内，并将其绑定到开始&终值的文本框？

Answer 1

min和max - dxRangeSlider的选项，指定一个边界值。

start和end - dxRangeSlider选项，指定所选间隔（手柄位置）的左右值。

绑定将是相同的，就像在example：

<div class="dx-fieldset" *ngFor="let column of columns" > 
    <div class="dx-field"> 
      <div class="dx-field-label">{{column.name}}</div> 
      <div class="dx-field-value"> 
       <dx-range-slider 
        #rangeSlider 
        [min]="0" 
        [max]="100" 
        [start]="column.start" 
        [end]="column.end" 
       ></dx-range-slider> 
       <dx-number-box 
        [min]="0" 
        [max]="100" 
        [(value)]="rangeSlider.start" 
        [showSpinButtons]="true" 
       ></dx-number-box> 
       <dx-number-box 
        [min]="0" 
        [max]="100" 
        [(value)]="rangeSlider.end" 
        [showSpinButtons]="true" 
       ></dx-number-box> 
      </div> 
     </div> 
</div> 

另外，我准备了working sample on Plunker与ngFor指令。