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

Question

我在 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.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"，它会正确显示。因此，静态步骤正在工作，但属性绑定的步骤值无法正常工作，对于步骤值

Answer 1

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);
  }
}