时间戳

首页 > 解决方案 > 角度输入范围滑块四舍五入十进制数据绑定值

javascript - 角度输入范围滑块四舍五入十进制数据绑定值

问题描述

我在 Angular 中创建了一个范围滑块，用于记录值和显示记录的值。

<input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="object.step" [min]="object.minValue" [max]="object.maxValue">

object包含来自数据库的 id、answer、step、min、max 的键值对。

对于以下对象，

{ id: 1, answer: 4, step: 0.25, minValue: 3, maxValue: 4 }

滑块显示正确的值，即 4。

但是，使用answer: 3.25andanswer: 3.75时，它分别显示 3 和 4。滑块似乎正在将十进制值四舍五入answer到最接近的整数。

我在MDN中查找了输入范围，在 step 部分下，有一条注释说：

当用户输入的数据不符合步进配置时，用户代理可能会四舍五入到最接近的有效值，当有两个相等接近的选项时，首选正方向的数字。

但是，3.25 或 3.75 不是有效值吗？两者都可以写成(min + multiple of step) <= max给定的 min: 3, max: 4 and step: 0.25

我还查看了如何在此处禁用用户代理验证，并在表单标签中使用novalidate了属性，滑块仍然无法正确显示十进制值。但是，对于指定范围内的整数值，它会正确显示。

编辑 1：我尝试检查不同类型的“步骤”值。它正确显示整数步长（1、2、3）、小数 > 1 步长（1.1、1.5、2.5）。十进制 < 1 步（0.5、0.3）似乎无法正确显示。

编辑2：另外，如果我使用step="0.25"而不是[step]="object.step"，它会正确显示。因此，静态步骤正在工作，但属性绑定的步骤值无法正常工作，对于步骤值 < 1 也是如此。

标签： javascripthtmlangularformsinput

解决方案

现场示例
我尝试通过少量调整来复制您的场景，它似乎工作正常。请看看它是否对您有帮助。随意根据您的要求调整 obj 的模型值。

模板：

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
  <br>Please see the console :)
</p>
<input 
[id]="obj.id" type="range" 
[step]="obj.step" [min]="obj.minValue" [max]="obj.maxValue" [(ngModel)]="obj.answer" 
 (ngModelChange)="valueChanged($event)"
>

零件：

import { Component, VERSION, OnChanges } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  obj = {
    id: 1,
    answer: 0,
    step: 0.25,
    minValue: 0,
    maxValue: 47.8
  };
  constructor() {}

  valueChanged(event:any){
    console.log(event);
    console.log(this.obj);
  }
}

推荐阅读