Angular 在*ngFor的每次迭代中只调用一次函数

我有这段代码，

*ngFor

在同一次迭代中多次调用函数（

randomData（I）

）

<div class="col-sm-12">
   <ng-container *ngFor="let item of data; let i = index">
     <div
        [ngClass]="{
        'd-none':
            (randomColor(i).clase == 'categoria1' && !categoria1) ||
            (randomColor(i).clase == 'categoria2' && !categoria2) ||
            (randomColor(i).clase == 'categoria3' && !categoria3)
        }">
        <div id="ribbon-container">
        <span id="ribbon" [ngClass]="randomColor(i).clase">
          {{randomColor(i).categoria}}
        </span>
        </div>
        <div>
        <img [src]="'./assets/img/emotions/' + randomColor(i).imagen" class="img-fluid imagen_tarjeta_emociones float-right"
        />
    </div>
 </ng-container>

---

有没有一种方法可以让这个函数在每次迭代中只调用一次？可以将

randomData（i）

的值存储在模板中的一个临时变量中，或者其他可以避免多次运行函数的内容。

在ts文件中处理

数据，如下所示：

data.forEach((item, i) => {
      item = Object.assign(item, this.randomData(i));
});

然后更新模板：用
项替换所有
随机数据（i）

<div class="col-sm-12">
   <ng-container *ngFor="let item of data; let i = index">
     <div
        [ngClass]="{
        'd-none':
            item.clase == 'categoria1' && !categoria1) ||
            item.clase == 'categoria2' && !categoria2) ||
            item.clase == 'categoria3' && !categoria3)
        }">
        <div id="ribbon-container">
        <span id="ribbon" [ngClass]="item.clase">
          {{item.categoria}}
        </span>
        </div>
        <div>
        <img [src]="'./assets/img/emotions/' + item.imagen" class="img-fluid imagen_tarjeta_emociones float-right"
        />
    </div>
 </ng-container>


{{item.categoria}}
一般来说，您不应该在模板中运行任何函数。它对性能有很大的影响。看起来每个项目都已具有“类别”属性。为什么不去掉这个函数，只写“[ngClass]=”item.categia“，然后为每个类别创建一个单独的css规则呢？
<div class="col-sm-12">
   <ng-container *ngFor="let item of data; let i = index">
     <div
        [ngClass]="{
        'd-none':
            item.clase == 'categoria1' && !categoria1) ||
            item.clase == 'categoria2' && !categoria2) ||
            item.clase == 'categoria3' && !categoria3)
        }">
        <div id="ribbon-container">
        <span id="ribbon" [ngClass]="item.clase">
          {{item.categoria}}
        </span>
        </div>
        <div>
        <img [src]="'./assets/img/emotions/' + item.imagen" class="img-fluid imagen_tarjeta_emociones float-right"
        />
    </div>
 </ng-container>