javascript - Angular 5 DOM 双向绑定(bind)输入数字和 slider

Question

我尝试同时使用 slider 和数字类型输入。我在运行时创建对象，所以我想在 DOM 中完成它。如果我更改 slider 的值，输入将获得相同的值，但反之则不然。而且一开始输入的数字没有值。

    ..
    *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

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

通过双向数据绑定(bind)，当模型中的属性更新时，UI 也会更新。当 UI 元素更新时，更改将传播回模型。

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