Angular 2, ngFür jede Iteration einen neuen Kontext erstellen?

Question

Jeder! In Angular 2, * ngFür einen neuen Kontext für jede Iteration erstellen? wie ng-repeat in eckigen js ?. Ich muss einen Variablenwert innerhalb von * ngFor ändern, aber dieser Wert ändert sich für alle Iterationen. Beispiel:

<div *ngFor="let label of labels"> 
 
    <div class="company"><a (click)="isCollapsed = !isCollapsed;isCollapsed ?      labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}"      [ngStyle]="labelStyle">{{label}}</a> 
 
    </div> 
 
    <div [ngbCollapse]="isCollapsed"> 
 
     <div class="item" *ngFor="let product of products"> 
 
      <div class="meta" *ngIf="product.year == label"> 
 
       <div class="details"> 
 
       <div [innerHTML]=product.reference></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
</div>

Wenn ich auf ein Etikett klicken Sie, isCollapsed Änderung von false auf true, aber isCollpsed Änderung für alle Iterationen. Könnten Sie mir einen Ratschlag geben, nur ein Label anzuklicken und einzuklappen?

Dank

Answer 1

add als Eigenschaft der Klasse von Etiketten verwendet isCollapsed.

In Ihrer Komponente, wenn Ihr ‚Labels‘ eine Reihe Array ist, das heißt, wenn es zur Zeit:

labels: number[] 

es dann zu

ändern

labels: MyLabel[] 

und nach der Komponentenklasse ein Modell hinzufügen genannt MyLabel wie:

class MyLabel{ 
    constructor(public year: number, public isCollapsed: boolean){} 
} 

Und dann in den hTML-Code könnte es Ihnen gefällt verwenden:

<div *ngFor="let label of labels"> 
<div class="company"><a (click)="label.isCollapsed = !label.isCollapsed      labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}"      [ngStyle]="labelStyle">{{label.year}}</a> 
</div> 
<div [ngbCollapse]="label.isCollapsed"> 
    <div class="item" *ngFor="let product of products"> 
     <div class="meta" *ngIf="product.year === label.year"> 
      <div class="details"> 
      <div [innerHTML]=product.reference></div> 
      </div> 
     </div> 
    </div> 
    </div> 

Answer 2

Sie können mit index Namen ein Feld in der Komponente definieren und setzen Sie ihn auf null und mit $index wie folgt aus:

<div class="company"><a (click)="toggleCollapsed($index) ? labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}"      [ngStyle]="labelStyle">{{label.year}}</a> 

Und definieren toggleCollapsed (Index) als folgen:

toggleCollapsed(index : number){ 
    this.index != index ? this.index = index : this.index = null; 
    return this.index == index; 
}