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更改为column.name内的每个ngFor并将其绑定到开头和＆amp;结束值文本框？

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。

Angular 4绑定多个组件内部的ngFor

1 个答案: