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

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

我试图在单击时将超棒的字体应用于表头，但它同时应用于两个表头。如何将其仅应用于我单击的桌子头？

最佳答案

您将两个表头的ngClass es绑定(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>

关于javascript - 如何将ngClass仅应用于一个表头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61755578/