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>

Answer 1

您能解决这个问题吗？