ngFor comment lier chaque élément séparément

Question

J'essaye de construire un tableau de bord en Angular 4. Dans ce tableau de bord j'ai utilisé * ngFor pour itérer sur un json (en passant par le service) et j'ai affiché une série de rapports à l'intérieur des cartes. Dans chaque carte il y a quelques icônes sur l'en-tête et après les avoir cliqué quelques actions seront exécutées .. telles qu'actualiser, télécharger, information surgissante dans l'info-bulle, pin-unpin etc.

Pour ce faire j'ai pensé utiliser variables à lier les éléments comme (cliquer) = "function()", et aussi [@animationTag] = "variable", comme ci-dessous:

... 
<div class="card" *ngFor="let r of reportCards; let x of index"> 
    <div class="card-header"> 
     {{r.reportName}} 
     <div class="close" aria-label="Close"> 
      <i class="fa fa-thumb-tack" aria-hidden="true" [@pinUnpin]="isPinned" (click)="unpinCard($event)"></i> 
     </div> 
    </div> 
    <div *ngIf="!ifMinimized" class="card-body"> 
     {{r.reportMainDesc}} 
    </div> 
    <div *ngIf="!ifMinimized" class="card-footer"> 
     {{r.reportFooterDesc}} 
    </div> 
</div> 
... 

Le code d'animation correspondant:

animations: [ 
trigger('pinUnpin', [ 
    state('pin', style({ 
     transform: 'rotate(0deg)', 
    })), 
    state('unpin', style({ 
     transform: 'rotate(90deg)', 
    })), 
    transition('pin => unpin', animate('300ms ease-in-out')), 
    transition('unpin => pin', animate('300ms ease-in-out')) 
]), 
] 

L'intérieur composant la fonction correspondante:

unpinCard(pEvent) { 
    this.ifMinimized = this.ifMinimized === true ? false : true; 
    this.isPinned = this.isPinned === "pin" ? "unpin" : "pin"; 
} 

La question:

Toutes les fonctions fonctionnent très bien, mais la question est à chaque fois que je vous cliquez sur une icône (broche) sur une carte particulière .. les actions si effectué sur toutes les cartes, signifie que toutes les cartes sont minimisées ensemble et aussi les icônes (broches) de toutes les cartes sont animées en même temps.

Je suppose que, cela est dû aux variables ifMinimized & ifPinned qui sont liés avec toutes les cartes générées par ngFor. S'il vous plaît aidez-moi à comprendre comment je peux lier des éléments individuels de sorte que si je clique sur l'icône d'un élément, l'action ne sera effectuée sur cet élément que sur tous les éléments qui ont été générés par le ngFor.

Merci d'avance.

Answer 1

Il suffit de passer le Reportcard (r) à votre fonction unpinCard et définir ifMinimized et isPinned sur cette carte: r['ifMinimized'] = !r['ifMinimized']

Ou supprimer la fonction et type simple dans le code html:

(click)="r.ifMinimized = !r.ifMinimized" 
*ngIf="!r.ifMinimized"