您好,我有多个表在一个数组中循环,但在这里,如果我单击第一个表的图标,所有表的标题名称中的图标都会更改,而不是更改为特定表。
DEMO:
DEMO https://stackblitz.com/edit/angular-ef7htj?file=src%2Fapp%2Fapp.component.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>
None
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)