Angular 4结合NGFOR内部的多个组件

Question

我正在使用devextreme范围滑块，我想通过我的columns数组迭代以动态创建范围滑块。

我在此处关注示例：DevexTreme范围滑块Angular Demo

我不知道如何将每个范围滑块绑定到其启动＆amp;最终值文本框。

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并将其绑定到start＆amp;最终值文本框？

Answer 1

min and max- dxrangeslider的选项，指定边框值。

启动和结束 - dxrangeslider的选项，指定所选间隔的左右值(句柄位置(。

绑定将是相同的，例如：

<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指令准备了Plunker上的工作样本。