Question

我尝试同时使用滑块和类型编号的输入。我在运行时创建对象，所以我想在DOM中完成它。如果我更改滑块的值，则输入将获得相同的值，但不会相反。而且开头的输入数字也没有价值。

    ..
    *ngFor="let vk of selectedVK"
    ..
   <div class="row">
    <div class="col-md-7">
        <input 
            type="range"
            ngModel
            name="slider"
            #slider="ngModel"
            min="0" 
            max="{{vk.max}}" 
            step="10" 
            value="{{vk.max/2}}"/>
    </div>
    <div class="col-md-5">
        <input 
        type="number"
        class="form-control"
        [value]="slider.value"
        max="{{vk.max}}"
        min=0>
    </div>

    <p>{{slider.value}}</p>
 </div>

Answer 1

您需要使用双向数据绑定。

使用双向数据绑定，当模型中的属性更新时，UI也会更新。当UI元素更新时，更改会传播回模型。

<input 
    type="number"
    class="form-control"
    [(ngModel)]="slider.value"
    max="{{vk.max}}"
    min=0>

Angular 5 DOM双向绑定输入数字和滑块

1 个答案: