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 and max - dxRangeSlider 选项，指定边框值。

start and 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 指令。

Angular 4 在 ngFor 中绑定多个组件

Angular 4 Bind Multiple Component Inside ngFor

devextreme

angular