Toggle Zeile basierend auf ID - Angular 4

Question

Ich habe eine Tabelle, und wenn ich auf eine Zeile klicke, möchte ich eine andere Zeile darunter anzeigen (mit einigen Informationen über diese Zeile). Ich weiß nicht, wie man es umschalten kann, aber auch mehrere Unterreihen öffnen zu können. Irgendwie muss ich das Umschalten basierend auf der Zeilen-ID aktivieren, das ist es, was ich herausgefunden habe, aber es funktioniert nicht wirklich so, wie ich es brauche.

<ng-container *ngFor=" let fields of mf.data; let i = index"> 
    <tr> 
    <td (click)="expandCompareRow(i)">Something</td> 
    <td>Something</td> 
    </tr> 

    <tr *ngIf="compareRowExpanded == i && expandedRow"> 
    <td>Something</td> 
    <td>Something</td> 
    </tr> 
    </ng-container> 

    TS: 
    expandCompareRow(index) { 
     this.compareRowExpanded = index; 
     this.expandedRow = !this.expandedRow; 
     } 

Dies eröffnet eine Reihe, aber wenn ich ein anderes zu öffnen, es schließt zuerst die Zeile, die bereits geöffnet wird, dann wieder ich muss Sie auf diese Zeile zu öffnen.

Answer 1

ein expanded Grundstück mit dem Objekt verwenden und wechseln Sie zwischen ihnen wie unten

<ng-container *ngFor=" let fields of mf.data; let i = index"> 
    <tr> 
    <td (click)="expandCompareRow(fileds)">Something</td> 
    <td>Something</td> 
    </tr> 

    <tr *ngIf="fields.expanded"> 
    <td>Something</td> 
    <td>Something</td> 
    </tr> 
</ng-container> 

Typoskript Code

expandCompareRow(fields) { 
    fields.expanded = ! fields.expanded; 
    } 

Sie können es auch tun, ohne das Verfahren

<td (click)="fields.expanded = ! fields.expanded">Something</td>