Отображение дополнительной информации после щелчка по строке таблицы в angular

Question

У меня есть таблица, которая содержит список информации из базы данных. Моя проблема, как я могу отображать информацию каждой строки под этой строкой, другими словами, мне нужно больше информации об этой строке.

У меня есть уже удалось отобразить информацию, но под таблицей.

<tbody>
<ng-container>
<tr *ngFor="let affectation  of affectations">

<td>{{affectation[1]}}</td>
<td>{{affectation[2] }}</td>
<td>{{affectation[3]}}</td>
<td><button type="button" class="btaction"
(click)="getAffectationForEmploye(affectation[0])">Actionner</button></td>
--after clicking show more information about the line of table 1
</tr>

--show informations about the line of table 1 
<tr [hidden]="!visionnerTableau" class="trDisplay" *ngFor="let affecter of affecters">
<td>{{affecter.fiche.nom}}</td>
<td>{{affecter.fiche.prenom}}</td>
<td>{{affecter.fiche.produit.nom_produit}}</td>
</tr>

</ng-container>
</tbody>

Answer 1

вы должны поместить первый для l oop в ng-контейнер, и если вы просто хотите отображать информацию по одной строке за раз, вы можете использовать для этого индекс и selectedItemIndex в вашем компоненте и, возможно, ngIf вместо скрытого вызова getAffectationForEmploye только для выбранного элемента. Так что-то вроде этого:

<tbody>
<ng-container *ngFor="let affectation  of affectations; let i = index;">
<tr>
<td>{{affectation[1]}}</td>
<td>{{affectation[2] }}</td>
<td>{{affectation[3]}}</td>
<td><button type="button" class="btaction"
(click)="selectedItemIndex = index;">Actionner</button></td>
--after clicking show more information about the line of table 1
</tr>

--show informations about the line of table 1 
<ng-container *ngIf="selectedItemIndex === index">
<tr class="trDisplay" *ngFor="let affecter of getAffectationForEmploye(affectation[0])">
<td>{{affecter.fiche.nom}}</td>
<td>{{affecter.fiche.prenom}}</td>
<td>{{affecter.fiche.produit.nom_produit}}</td>
</tr>
</ng-container>

</ng-container>
</tbody>