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

Question

我正在学习 Angular 中的编程，但我遇到了属性绑定问题。但首先是我的代码部分：

// 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 属性包含一个对象数组，我想用他的名字、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