Angular 10 中的范围滑块不适用于十进制值

Question

我正在使用范围滑块，但我观察到十进制设置值在 Angular 10+ 中无法正常工作。 奇怪的是，如果我仅在 HTML 中执行相同的代码，它就可以正常工作。

app.component.html：

<input
  #slider3
  type="range"
  min="1.3"
  max="2.7"
  value="1.9"
  step="0.1"
/>
Result: {{ output}}

app.component.ts：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('slider3', { read: ElementRef })
  public sliderOne: ElementRef;
  output;

  ngAfterViewInit(): void {
    console.log('..', this.sliderOne.nativeElement.value);
    this.output = this.sliderOne.nativeElement.value;
  }
} 

输出应该是 1.9。

我只能在 HTML 中看到与 Angular 9 版本相同的结果，但在 Angular 10 中我看到的是不同的输出 2.3

我们可以删除 value 属性并直接设置 this.sliderOne.nativeElement.value = '1.9' 或使用 @rahultiwari 回答的 ngmodel 即可。

但我想知道为什么它在 Angular 9 之前一直有效，但在那之后却没有？

Angular 9：（正确输出）

https://stackblitz.com/edit/angular-9-starter-vxny4j?file=src%2Fapp%2Fapp.component.html

Angular 11：（错误输出）

https://stackblitz.com/edit/angular-11-new-r2l1ta?file=src%2Fapp%2Fapp.component.ts

Answer 1

我改变了一些东西，因为 angular Lifecycle 存在一些问题，导致错误。

 <input
  #slider3
  type="range"
  min="1.3"
  max="2.7"
  step="0.1"
  (change)="setVal($event)"
/>
Result: {{ output}}

组件.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('slider3', { read: ElementRef }) public sliderOne: ElementRef;
  public output = 1.9;

  ngAfterViewInit(): void {
    console.log('..', this.sliderOne.nativeElement.value);
    this.sliderOne.nativeElement.value = this.output;
  }

  setVal(e) {
    this.output = e.target.value;
  }
}

Answer 2

<input #input type="range" [(ngModel)]="inputValue" [step]="params.step" 
[min]="params.min" [max]="params.max">

<div>
 <pre><code>{{input.value}}</code></pre>
</div>



import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
 })
export class AppComponent {
name = 'Angular';

params = { 
defaultValue: 70.5,
min: 30,
max: 120,
step: 0.1 
};

inputValue: number = this.params.defaultValue;
}