html - 如何仅针对特定表格更改图标而不是整体更改
问题描述
嗨,我有多个表在一个数组中循环,但是在这里,如果我单击第一个表的图标,则所有表的该标题名称中的图标都会更改,而不是更改为特定表。
演示: 演示
TS:
public sortContactsList(param,key) {
this.sorting = (this.sorting === 'asc') ? 'desc' : 'asc';
this.contactListDetails.forEach(item => {
if (item.param === param) {
item.icon = item.icon === 'fa fa-sort-down active' ? 'fa fa-sort-up active' : 'fa fa-sort-down active';
this.sorting = (item.icon === 'fa fa-sort-down active') ? 'desc' : 'asc';
} else {
item.icon = 'fa fa-sort'
}
});
}
HTML:
<div *ngIf="contactsDetails[0].result[key]?.length > 0">
<h6 style="font-weight: 600;">{{key | titlecase}}</h6>
<table class="table table-hover accordion-table" id="accordionContact">
<thead>
<tr>
<th scope="col" *ngFor="let field of contactListDetails" (click)="sortContactsList(field.param,key)">
{{field.displayName}}
<i class="{{field.icon}}" aria-hidden="true"></i>
</th>
<th scope="col" class="width125"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let fields of contactsList[key]">
<td *ngFor="let field of contactListDetails">{{fields[field.param]}}</td>
<td class="width125 {{paginationDisable?'link-disabled':''}}"><button class="btn btn-outline-primary btn-table" title="Send Mail"
(click)="userDisplay(contactsDetails[0].result[key][0])" [disabled]="isReadOnly && mode ==1">Email</button>
</td>
</tr>
</tbody>
</table>
</div>
解决方案
推荐阅读
- grafana - 解释grafana查询
- javascript - 如何在引导程序中添加幻灯片
- azure - 如何为 Azure AppService 配置 access_token 以允许访问通过 Azure Active Directory 保护的两个 FunctionApp?
- batch-file - Scala Huygens Fokker(仅限命令行)v1.88b 不幸地删除了多余的空格
- python - 如何用管道连接子列表的元素?
- javascript - 停止从请求库监听完成事件
- amazon-web-services - 如何设置 VPC 以便所有内部 EC2 使用相同的 EIP 与外部通信?
- c# - 如何使用 C# .NET 3.5 解压缩 7z 存档?
- ruby - 来自具有相同键的两个不同对象的 ruby / 合并和值
- ios - 在 iOS 中使用 firebase 实现通知的问题