Angular 4将多个组件绑定在一起ngFor
问题描述:
我正在使用DevExtreme范围滑块,我想遍历我的columns
数组以动态创建范围滑块。Angular 4将多个组件绑定在一起ngFor
我在这里继例如: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
内,并将其绑定到开始&终值的文本框?
答
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指令。
+0
工程就像一个魅力! –
它不应该是模板而不是ng-template吗? –
@WoutervanVegchel'模板'已弃用:) –