时间戳

首页 > 解决方案 > 使用 NgStyle 的角度设置位置不起作用

javascript - 使用 NgStyle 的角度设置位置不起作用

问题描述

我在使用 NgStyle 为以下代码设置位置时遇到问题：

<ng-container *ngFor="let handlePosition of handlePositions; let i = index;">
      <div [ngStyle]="{'transform': 'translate(' + value + 'px, 0px)'}" class="handle-slider__handle"
        [ngDraggable]="fc.enabled"
        [lockAxis]="'y'"
        [bounds]="handleSlider"
        [inBounds]="inBounds"
        [position]="{ x: handlePosition, y: 0 }"
        (endOffset)="onHandleChange($event, i)"></div>
    </ng-container>

似乎 ngStyle 没有对元素应用更改。有人能指出我如何解决这个问题吗？

@EDIT我已经这样做了，但是必须有一种方法可以有角度地做到这一点。

setHandleMaxPosition() {
    const tempValues = this.fc.value;
    tempValues[1] = this.values[this.indexOfNearestMax];
    this.fc.setValue(tempValues);
    this.handlePositions[1] = this.valuePositions[this.indexOfNearestMax];

    var a = Array.from(document.getElementsByClassName('handle-slider__handle') as HTMLCollectionOf<HTMLElement>)
    a[1].style.transform = "translate(" + this.valuePositions[this.indexOfNearestMin] + "px, 0px)";
  }

标签： javascripthtmlcssangularangular8

解决方案

你确定你的value变量包含一个数值吗？

因为[ngStyle]="{'transform': 'translate(' + value + 'px, 0px)'}"我觉得好看。

推荐阅读