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

如何解决角输入范围滑块四舍五入十进制数据绑定值

我已经以Angular的形式创建了一个范围滑块，用于记录值和显示记录的值。

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

object包含来自数据库的ID，答案，步长，最小值，最大值的键/值对。

对于后续对象，

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

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

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

我在MDN处查找了输入范围，并且在“步骤”部分下有一个注释，上面写着：

当用户输入的数据不遵循步进配置时，用户代理可能会舍入到最接近的有效值，当有两个相等接近的选项时，用户代理会偏向正数。

但是，3.25或3.75不是有效值吗？对于给定的最小值：3，最大值：4和步长：0.25，两者都可以写为(min + multiple of step) <= max

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

编辑1：我尝试检查不同类型的“步长”值。正确显示整数步（1、2、3），十进制> 1步（1.1、1.5、2.5）。十进制

编辑2：此外，如果我使用step="0.25"而不是[step]="object.step"，则显示正确。因此，静态步骤有效，但是属性绑定的步骤值无法正常工作，步骤值

解决方法

Live Example
我已经尝试了一些细微调整来复制您的方案，但似乎工作正常。请看看它是否对您有帮助。可以根据需要随意调整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);
  }
}