Question

我有这段代码，*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)的值存储在模板中的临时变量中，或者避免将函数多次运行。

Answer 1

像这样在您的ts文件中处理<script> var card; $("#startReview").click(function () { $.ajax({ type: "GET", url: "/VolunteerEvent/GetEvents", success: function (c) { card = { Id: c.Id, CardFront: c.CardFront; CardBack: c.CardBack, Deck: c.Deck }; //request for your partial to render via ajax $.ajax({ url:'_Flashcard', type: 'post', data: card, success:function(response){ $("#Flashcards").html(response); } }) }, error: function (error) { $("#Flashcards").html("<p>You have no cards ready for review</p>") } }) }); </script>：

data

然后更新您的模板：将所有data.forEach((item, i) => { item = Object.assign(item, this.randomData(i)); });替换为randomData(i)

item

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

1 个答案: