Двухстороннее связывание ngStyle

Question

Я пытаюсь заставить ngStyle изменять значение поля left всякий раз, когда я меняю что-то на мое range value.

Я был вдохновлен тем, как это делается: https://codepen.io/mayuMPH/pen/ZjxGEY, но яне найти способ сделать это в angular6-7.

, только когда документ загружен, изменится значение ngStyle влево.но я не заставляю его работать, когда я тащу диапазон.Как я могу получить rs-bullet, чтобы следовать значение?

HTML-код:

<div class="container">
  <div class="range-slider">
    <span id="rs-bullet" [ngStyle]="{'left':RangePos}"   (change)="changeZoom()" class="rs-label" >{{ rangeValue }}</span>
    <input id="rs-range-line" [(ngModel)]="rangeValue" class="rs-range" type="range" value="0" min="0" max="100">

  </div>

  <div class="box-minmax">
    <span>0</span><span>200</span>
  </div>



</div>

компонент:

  rangeValue = 0;
  RangePos = ((40 / 1000) * 578) + 'px';

  ngOnInit() {






  }

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

Answer 1

Вы не можете использовать change на span, потому что на нем нет такого события.На самом деле, вам это даже не нужно, потому что ngModel должен обрабатывать все изменения.

Итак, чтобы ваш пример работал, вы должны просто изменить

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

и

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

Также делитель 1000 в вашем примере неверен, потому что вы вводите максимальное значение диапазонаэто 100.

Здесь вы можете увидеть ваш пример, работающий на Angular: https://stackblitz.com/edit/angular-66fr5v.

Убедитесь, что вы добавили FormsModule в модуль приложения.В противном случае ngModel не будет работать.

Answer 2

Можете ли вы попытаться установить функцию для привязки стиля следующим образом?

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

компонент:

setRangePosStyles(RangePos){
        return {'left':RangePos};
    }