ID를 기반으로 행 토글 - 각도 4

Question

테이블이 있으며 일부 행을 클릭하면 해당 행에 대한 정보가있는 다른 행을 표시하려고합니다. 나는 그것을 토글 링하는 것이 가능하도록하는 방법을 모르지만, 여러 개의 하위 행을 열 수 있어야한다. 어떻게 든 행 ID를 기반으로 토글을 사용하도록 설정해야합니다. 그러나 이것이 내가 필요로하는 것처럼 실제로 작동하지 않습니다.

<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; 
     } 

이

은 행을 열고,하지만 난 다른 하나를 열고 자 할 때, 먼저 나는이 행을 열고 다시 클릭해야, 이미 열려 행을 닫습니다.

Answer 1

당신은 방법 않고 그것을 할도 할 수있는 객체와 expanded 속성을 사용하고 타이프 라이터 코드

<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> 

아래

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

로 사이를 전환

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