Html 如何仅更改特定表的图标，而不更改整个表的图标

您好，我有多个表在一个数组中循环，但在这里，如果我单击第一个表的图标，所有表的标题名称中的图标都将更改，而不是更改为特定的表

演示：

TS:

HTML:

{{key | titlecase}}
{{field.displayName}
{{fields[field.param]}
电子邮件

 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'
        }
      });
  }

  <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>