javascript - 如何将 ngClass 仅应用于一个表头

Question

HTML

<th>Car Name <i (click)="sortData('carName')" [ngClass]="custom" class="fa sort-icon"></i></th>

<th>Car Status <i (click)="sortData('carStatus')" [ngClass]="custom" class="fa sort-icon"></i></th>

TS

sortData(name) {
  this.pipeFlag = !this.pipeFlag;
  this.custom = (this.pipeFlag === true) ? 'fa-arrow-down' : 'fa-arrow-up';
}

我正在尝试在单击时将 Font Awesome 类应用于表头，但它已应用于两个表头。如何仅将它应用到我单击的表头？

Answer 1

您将两个表头的 ngClass 绑定(bind)到同一个变量:[ngClass]="custom"，因此当 custom 更改时，两个表头都将更新。

您可以创建一个对象来保存不同元素的类，如下所示:

public custom = {
  carName: 'fa-arrow-down'
  carStatus: 'fa-arrow-down'
};

那么您的sortData 方法将如下所示:

sortData(name) {
  this.pipeFlag = !this.pipeFlag;
  this.custom[name] = (this.pipeFlag === true) ? 'fa-arrow-down' : 'fa-arrow-up';
}

和 HTML:

<th>Car Name <i (click)="sortData('carName')" [ngClass]="custom['carName']" class="fa sort-icon"></i></th>
<th>Car Status <i (click)="sortData('carStatus')" [ngClass]="custom['carStatus']" class="fa sort-icon"></i></th>