Angular 4在ngFor中绑定多个组件

Question

我正在使用 DevExtreme Range Slider，我想遍历我的 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 更改为ngFor 内的每个column.name 并将其绑定到开始和结束值文本框？

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>

另外，我准备了一个带有 ngFor 指令的working sample on Plunker。