Enregistrer les variables dans la boucle ngFor, qui résulte d'un élément

Question

J'étais curieux, quelle est la bonne façon d'enregistrer une variable, résultant d'un élément, dans une boucle *ngFor, car je ne veux pas appeler une fonction plusieurs fois pour des raisons d'efficacité

exemple de ce que je suis en train de faire:

<div *ngFor="let item of items; let i = index; let value = getValue(item)" [ngClass]="{'alert':!value}"> 
    <div *ngIf="!value"> 
    alert 
    </div> 
    {{item}} 
</div> 

exemple de ce que je suis en train d'éviter:

<div *ngFor="let item of items; let i = index;" [ngClass]="{'alert':!getValue(item)}"> 
    <div *ngIf="!getValue(item)"> 
    alert 
    </div> 
    {{item}} 
</div> 

Answer 1

Mettez votre items dans une fonction map et renvoyer la valeur appropriée pour chaque élément.

function valueize(items: any[]): any[] { 
    return items.map(item => { 
     name: item.name, 
     description: item.description, 
     // etc... 
    }; 
} 

<div *ngFor="let item of valueize(items); let i = index;" [ngClass]="{'alert':!item}"> 
    <div *ngIf="!item"> 
    alert 
    </div> 
    {{item}} 
</div> 

Vous pouvez le faire avant que le *ngFor est même appelé, de sorte que vous pouvez juste faire *ngFor="let item of items" où chaque item en items est déjà la bonne valeur. Vous pouvez le faire à l'intérieur de votre constructeur ou ngOnInit, par exemple.

Edit:

Comme mentionné ChrisG, vous pouvez faire ce nettoyeur si vous avez déjà votre fonction getValue en procédant comme suit:

<div *ngFor="let item of items.map(getValue); let i = index;" [ngClass]="{'alert':!item}"> 
    <div *ngIf="!item"> 
    alert 
    </div> 
    {{item}} 
</div> 

De cette façon, vous ne devez pas créer un toute nouvelle fonction à mapper, vous mappez simplement en ligne et pour chaque élément que vous appelez la fonction d'adaptateur, donnant ainsi à chaque item la valeur correcte.

Answer 2

Il n'y a aucun moyen de faire ce que vous voulez.

La seule chose que vous pouvez faire est de créer un tableau, stocker les valeurs dans le tableau, puis les récupérer en utilisant l'index. Quelque chose comme ...

let data = []; 
. 
. 
. 
<div *ngFor="let item of items; let i = index" ngClass="{'alert':!data[i]}"> 
{{ data[i] = getValue(item) }} 
    <div *ngIf="!data[i]"> 
    alert 
    </div> 
    item 
</div> 

Et encore ne sais pas si cela va fonctionner, angulaire est ment pas pour ce genre de choses, il est beaucoup plus facile d'analyser simplement vos valeurs avant de les pousser à la boucle, comme. ..

<div *ngFor="let value of getItemValues(items); let i = index" [ngClass]="{'alert':!value}"> 
    <div *ngIf="!value"> 
    alert 
    </div> 
    {{value}} 
</div> 

Où getItemValues() analysera toutes les valeurs à la fois.