Angular - ngStyle重复调用函数

Question

我想在ngFor中使用ngStyle并调用一个转换圆形数据的函数。问题是如果我得到大约10000多个数据，它会滞后并且一直冻结。它们的变换是一个部分，但至少在之后它们加载它应该再次正常运行，但由于ngStyle它没有做到这一点。 ngStyle（以及所有其他双向绑定）每次使用鼠标移动时都会调用该函数，或者它会检测到更改。

所以我的问题是：有没有办法解决这些多次调用，只为每个数据元素调用1次ngStyle，还是有另一种方法通过调用ngFor中的函数来改变元素的样式？ （也试过viewChild，但还没有工作）。

component.html

<div *ngFor="let data of arrData; let i = index">
   <ul>
       <!-- rotateAngleArray got numbers which defines the position/direction 
of the data -->
      <li [ngStyle]="{ 'transform': 'rotate(' + rotateAngleArray[i] + 'deg) translate(0,' + -objHeight + 'px) rotate(' + -rotateAngleArray[i] + 'deg)' }">
       <!-- or <li [ngStyle]="getRotation()" ... same result -->
        <div>{{ data }}</div>
      </li>
   </ul>
</div>