如何以角度5以编程方式转换html元素答案

【问题标题】：how to transform html element programmatically in angular 5如何以角度5以编程方式转换html元素
【发布时间】：2018-09-09 06:14:42
【问题描述】：

我正在尝试以编程方式转换 html 元素。更新的转换值在控制台选项卡中更改，但在浏览器的元素选项卡中未更改。

onDragStart(element: HTMLElement) {
    this.elementRef = element;
    var style = window.getComputedStyle(element);
    var matrix = new WebKitCSSMatrix(style.webkitTransform);
    this.translateY = matrix.m42;
    console.log(this.translateY) //outputs: 85, because its current Y-location is 85px 

    element.style.transform = "translate( 0px," + this.translateY + "px)";
    console.log(element);    
  }

我哪里错了？我在过去 24 小时内遇到了这个问题。

【问题讨论】：

只使用变量并更改名称？ this.text = ''; 和 this.text = "translate( 0px," + this.translateY + "px)";。在 html 中你可以做 {{text}}
实际上我正在使用 *ngFor 以编程方式插入多个 html 元素，因此 {{text}} 将为所有这些元素进行更改。不是吗？
请阅读：angular.io/guide/template-syntax

标签： javascript css angular typescript angular5

【解决方案1】：

从句法和逻辑上讲，这个问题是正确的。

实际上我没有设置 html 元素的 top-attribute，这就是为什么它在第一次点击时表现不理想（从当前位置开始位置转换（0px，0px））。

首先设置top，然后在任何地方设置transform，因为设置top 会保持它的第一个位置，然后你可以将它翻译到某个位置

【讨论】：