Невозможно связать значение ионного диапазона с ngModel

Я пытаюсь связать значение ion-range со значением по умолчанию [(ngModel)], но это не представляется возможным. Я объявил rangevalue как number, как указано в документации. Я вижу, что кому-то уже удалось сделать это с 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, используя тот же код, что и я, но, к моему разочарованию, он работает так, как ожидалось. Возможно, что-то мешает правильному функционированию?


typescript ionic-framework angular ionic5 range
person leonardofmed    schedule 12.01.2021    source источник
comment
Я полагаю, что ваша переменная должна быть общедоступной (в Angular, если одна переменная не является общедоступной, ее нельзя использовать в .html)   -  person Eliseo    schedule 12.01.2021
comment
К сожалению, проблема не в этом. В других элементах HTML я использую ngModel с закрытыми переменными. Я думаю, что то, что вы указали, действительно только для использования переменной на других страницах. Несмотря на это, я попытался изменить его на общедоступный, но это не решило проблему.   -  person leonardofmed    schedule 12.01.2021
comment
моя вина!! это console.log(this.valueRange), вы забыли this   -  person Eliseo    schedule 12.01.2021
comment
На самом деле мой плохой! В моем коде я уже использую this., уже обновил исходный пост.   -  person leonardofmed    schedule 12.01.2021
comment
этот stackblitz.com /edit/ (я гуглил о ионном диапазоне stackblitz и раздвоении) выглядит как работа. Извините, я действительно не знаю о ionic   -  person Eliseo    schedule 12.01.2021
comment
Это очень странно и неприятно, я делаю то же самое, а переменная не обновляется. Это единственный компонент, где это происходит. Спасибо за вашу помощь в любом случае.   -  person leonardofmed    schedule 12.01.2021
comment
Кроме того, стек-блиц, на который вы ссылаетесь, использует Ionic 3 и Angular 5, возможно, в этом причина.   -  person leonardofmed    schedule 12.01.2021

Ответы (2)


arrow_upward
0
arrow_downward

Проблема была связана с тем, как был сгенерирован элемент диапазона, в данном случае программно с *ngFor. Следовательно, ngModel не был правильно связан. Чтобы решить эту проблему, я использовал функцию getElementById(), хотя мне не было интересно получать данные DOM без использования Angular.

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

arrow_upward
0
arrow_downward

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)
  }
person Faruk Aslan    schedule 22.01.2021