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

您应该将第一个for循环放在ng-container上，如果您只想一次显示1行信息，则可以为此使用索引，并在组件中使用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>

单击角表表格后显示更多信息

1 个答案: