时间戳

首页 > 解决方案 > 在 *ngFor 的每次迭代中只调用一次函数

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) {
    if (i == 0) {
    return {
        categoria: "Categoría 1",
        clase: "categoria1",
        imagen: "Alegria.png",
    };
    } else if (i % 2) {
    return {
        categoria: "Categoría 2",
        clase: "categoria2",
        imagen: "Enfado.png",
    };
    } else if (i % 3) {
    return {
        categoria: "Categoría 3",
        clase: "categoria3",
        imagen: "Neutro.png",
    };
  }
}

有没有办法让这个函数每次迭代只调用一次？可能将 的值存储randomData(i)在模板中的临时变量中，或者避免多次运行该函数。

标签： angular

解决方案

data像这样在你的 ts 文件中处理你的：

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

然后更新您的模板：将所有替换randomData(i)为item

<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>

推荐阅读