无法将离子范围值与 ngModel 绑定

Question

我正在尝试将 ion-range 值与默认值 [(ngModel)] 绑定，但这似乎不可能。我将 rangevalue 声明为 number，如 documentation. I see that someone already managed to do this with Ionic 5 (¹) (²) (³) 中所述，但我找不到与我的方法有任何区别。尽管每次更改范围时都会触发 change() 事件，但会保持相同的 rangeValue 值。

我正在使用 Ionic 5 和 Angular 10.

我尝试做的事情：

HTML 第一次尝试

<ion-range min="0" max="1" step="0.05" (ionChange)="change()" [(ngModel)]="rangeValue">
    <ion-icon size="small" slot="start" name="sunny"></ion-icon>
    <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>

HTML 第二次尝试

<ion-range min="0" max="1" step="0.05" (ionChange)="change()" [value]="rangeValue">
    <ion-icon size="small" slot="start" name="sunny"></ion-icon>
    <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>

TypeScript

private rangeValue: number;

change() {
    console.log('rangeValue: ', this.rangeValue);
}

编辑

Stackblitz 与 Ionic 5 和 Angular 10，使用我正在使用的 相同的 代码，但由于我对 stackblitz 的失望，它按预期工作.也许有什么东西干扰了正确的功能？

Answer 1

问题与范围元素的生成方式有关，在本例中是使用 *ngFor 以编程方式生成的。因此，ngModel 没有正确链接。为了解决这个问题，我使用了 getElementById() 函数，尽管我发现不使用 Angular.

获取 DOM 数据并不有趣

change(programmaticallyGenId) {
    let rangeValue = (<HTMLInputElement>document.getElementById(programmaticallyGenId)).value;
    console.log(rangeValue);
}

Answer 2

HTML:

<ion-range mode="md" min="0" max="1" step="0.05" [(ngModel)]="rangeValue" (ionChange)="change(rangeValue)">

TS:

public rangeValue: number = 0;

change(range){
    console.log(range)
  }

无法将离子范围值与 ngModel 绑定

Can't bind ion-range value with ngModel

angular

typescript

ionic-framework

range

ionic5