2 réponses

Meilleure réponse

Vous ne pouvez pas utiliser change sur span car il n'y a pas d'événement de ce type dessus. En fait, vous n'en avez même pas besoin, car ngModel devrait gérer tous les changements.

Donc, pour que votre exemple fonctionne, vous devez simplement changer

changeZoom() {
    return ((this.rangeValue / 1000) * 578) + 'px';
}

Et

<span id="rs-bullet" [ngStyle]="{'left': changeZoom()}" 
      class="rs-label" >{{ rangeValue }}
</span>

De plus, le diviseur 1000 dans votre exemple est incorrect car la valeur maximale de la plage d'entrée est 100.

Ici vous pouvez voir votre exemple, fonctionnant en Angular : https://stackblitz.com/edit/angular-66fr5v .

Assurez-vous que vous avez ajouté FormsModule au module d'application. Sinon, ngModel ne fonctionnera pas.

1
Sergey Mell 10 mars 2019 à 23:43

Pouvez-vous essayer de définir une fonction pour lier un style comme celui-ci ?

<span id="rs-bullet" [ngStyle]="setRangePosStyles(RangePos)" (change)="changeZoom()" class="rs-label" >{{ rangeValue }}</span>

Composante:

setRangePosStyles(RangePos){
        return {'left':RangePos};
    }
0
Jihoon Kwon 10 mars 2019 à 23:30