How to make icon change only for particular table instead of changing as whole

问题

Hi I have multiple tables looped in an array, but here if i click on icon of first table, the icon in that header name of all the tables are getting changed instead of changing to particular table.

DEMO: DEMO

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>

来源：https://stackoverflow.com/questions/62913176/how-to-make-icon-change-only-for-particular-table-instead-of-changing-as-whole

标签

html

angular