我正在使用表格,其中在td中我有一个称为详细信息的字段,如果我单击下面的模式打开,如果我单击第二行,则第一行vl与第二行一起保持打开状态,因此我想打开最近点击了一个,然后关闭了其余的。
HTML:
<div style="margin-top:34px;" *ngIf= "medicationTableValue.length >0">
<p-table #dt [columns]="tableHeaders" [value]="medicationTableValue">
<ng-template pTemplate="header" let-columns>
<tr role="row">
<th width="200">Name</th>
<th class="line-height15">Reason for Taking</th>
<th width="60">Details</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>{{rowData.name}}</td>
<td>{{rowData.Reason}}</td>
<td>
<a class="details" id="details1" (click)="detailsList(rowData)">
<i class="fa fa-angle-down"></i>
</a>
</td>
</tr>
<tr *ngIf="rowData.showDetailsList">
<td class="nes_table" colspan="8">
<div>
<table class="w-100 table table-bordered">
<tbody>
<tr>
<td width="150">Name</td>
<td>{{rowData.name}}</td>
</tr>
<tr>
<td width="150">Date Started</td>
<td>{{rowData.date}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
TS:
detailsList(rowData) {
rowData.showDetailsList = !rowData.showDetailsList;
}
答案 0 :(得分:1)
好处是每一行都有切换属性showDetailsList
。现在,您的要求是隐藏其他人并显示最新的人。
所以我们需要做的是将表的每一行的showDetailsList
设置为false
,然后设置当前行的showDetailsList
。
因此您的代码应类似于-
detailsList(tableData, rowData) {
let isHidden = rowData.showDetailsList;
tableData.forEach(row=>{row.showDetailsList = false;}) //reset all rows of table
rowData.showDetailsList = !isHidden;
}
(click)="detailsList(medicationTableValue, rowData)"
注意:实现是基于tableData及其属性的一些假设给出的。根据表和行属性进行更改。