Hide bestimmtes Element aus einer Liste in Angular 2

Question

Ich erzeuge Down-Caret und rechts-caret Schriftart awesome Symbole wiederholt in einer Komponente Vorlage mit *ngFor innerhalb <tr> s. Ich verstecke einen und zeige den anderen basierend auf einem Boolean Wert, den ich in der zugehörigen Klasse einstelle. Aber wenn ich den Wert ändere, verbirgt es auch alle anderen Symbole. Ich will nur den einen verstecken, auf den ich klicke statt der anderen. Gibt es eine Möglichkeit, dies innerhalb der Vorlage selbst zu tun, indem Sie eine Eigenschaft in der Vorlage festlegen und sie in der Klasse ändern, anstatt beide Elemente zu erhalten und sie dann in der Klasse zu verbergen?

Code:

<tr *ngFor="let obj of arr"> 
     <td id="{{obj.Parent}}" class='level{{obj.Level}}'>     
     <i *ngIf="showCollapse" (click)="collapseClicked($event)" class="fa fa-caret-down" aria-hidden="true"></i> 
     <I *ngIf="showExpand" (click)="expandClicked($event)" class="fa fa-caret-right" aria-hidden="true"></i> 
     {{obj.ATA}}</td> 
     <td>{{obj.Description}}</td> 
     <td>{{obj.MSI}}</td> 
</tr> 

Answer 1

Sie müssen Eckige sagen, welches Element erweitert werden soll oder kollabiert. Ein einzelnes Flag für Ihre Komponente kann nicht mit einem einzelnen Element zugewiesen werden. stattdessen

Versuchen:

<tr *ngFor="let obj of arr"> 
     <td id="{{obj.Parent}}" class='level{{obj.Level}}'>     
     <i *ngIf="showCollapse === obj" (click)="collapseClicked(obj)" class="fa fa-caret-down" aria-hidden="true"></i> 
     <I *ngIf="showExpand === obj" (click)="expandClicked(obj)" class="fa fa-caret-right" aria-hidden="true"></i> 
     {{obj.ATA}}</td> 
     <td>{{obj.Description}}</td> 
     <td>{{obj.MSI}}</td> 
</tr> 

export class MyComponent { 
    arr = [{Parent: 'xxx', Level: 'yyy'}, {Parent: 'aaa', Level: 'bbb'},]; 
    showCollapse:any; 
    showExpand:any; 
    constructor() { 
    this.showCollapse = this.arr[1]; 
    this.showExpand = this.arr[0]; 
    } 
}