使用NgStyle和属性绑定（或其他）的角度变换数据

Question

即时通讯在Angular中学习编程，我遇到了属性Bindings的问题。但首先是我的代码部分：

// TS FILE

data[
{"id": "1", "name": "tester", "rev": "1"},
{"id": "2", "name": "tester", "rev": "1"},
{"id": "3", "name": "tester", "rev": "1"},
];


createNumberArray(): number[] {
// code to fill array
return anyArrayOfNumbers
}

<div  *ngFor="let datas of data; let i = index" >


    <ul>
  <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate( numberArray[i] deg) translate(0,-100px) rotate(-numberArray[i]deg)' }">
     <!-- how it would work: <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate(200deg) translate(0,-100px) rotate(-150deg)' }"> -->
            <div class='label1'><img alt='notfound' class='img2' src='any icon'></div>
            <div class='label2'>
                {{ datas.name }}
            </div>
            <div class='label3'>
                {{ datas.id }}
            </div>
            <div class='label4'>
                {{ datas.rev }}
            </div>
        </li>
    </ul>
</div>

data属性包含一个对象数组，我想列出每个Object的名字，id和rev。我可以显示它们，但现在我也希望它们动态旋转。所以我创建了一个新的数字数组，它来自一个名为createNumberArray（）的函数。并且这些数字应告诉ngStyle每个循环运行哪个数字他应该旋转。这就是我想成为的样子：

<li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate( numberArray[i] deg) translate(0,-100px) rotate(-numberArray[i]deg)' }">

但那不起作用，因为我无法让它设法工作，我尝试使用属性绑定，但从来没有从变换内的数组中获取数字。这就是代码如何工作（始终只有相同的数字）：

<!-- how it would work: <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate(200deg) translate(0,-100px) rotate(-150deg)' }"> -->

我设法用Js，Jquery和html来完成这项工作，但现在我想用Angular来做。而且没有Jquery，所以我不要复制过去的旧代码。但我有点困惑，如果我将来应该在Angular中使用Jquery。什么是制造DOM的最佳方式，你们怎么想？

我将衷心感谢您的帮助。我已经感谢您花时间阅读我的问题了。

Answer 1

首先，在构造函数中设置数组值：

打字稿：

  ...
  anyArrayOfNumbers: number[] = [];
  constructor() {
    for (let i = 0; i < this.data.length; i++) {
      this.anyArrayOfNumbers.push(200);
    }
  }

  getNumberArray(index): number {
    return this.anyArrayOfNumbers[index];
  }

然后从html调用getNumberArray方法：

HTML

...[ngStyle]="{ 'transform': 'rotate('+numberArray[i]+'deg) translate(0,-100px) rotate('+numberArray[i]+'deg)' } ...

DEMO