如何将ngClass仅应用于一个表头答案

【问题标题】：How to apply ngClass to only one table head如何将ngClass仅应用于一个表头
【发布时间】：2020-08-28 12:30:56
【问题描述】：

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>

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

我正在尝试在单击时将一个很棒的字体类应用于表头，但它会应用于两个表头。如何仅将其应用于我单击的表头？

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

这是因为您对两者都使用相同的属性，您可以做以下 2 件事

1) 仅将 ngClass 应用于汽车名称 th，如果您希望课程仅在第一个 th 中应用

或

2) 只需在 ngClass 中调用函数并传递类似的标志

(click)="sortData('name')" // for name
(click)="sortData('status')" // for status

在函数中做这样的事情。

sortData(type) {
  this.pipeFlag = !this.pipeFlag;
  if(type === 'name'){
   this.custom =  (this.pipeFlag === true) ? 'fa-arrow-down' : 'fa-arrow-up';
  } else if(type === 'status'){
    // status related stuff
  } 
}

【讨论】：

【解决方案2】：

你们只是两个boolean，不管这个类是一个还是另一个。

<th>
    Car Name 
    <i (click)="sortData('carName')" class="fa sort-icon" 
     [ngClass]="{
          'fa-arrow-down': !iconClasses.carName,
          'fa-arrow-up': iconClasses.carName
     }"></i>
</th>
<!-- The other th tag analogue but pointing to iconClasses.carStatus -->

让我们定义iconClasses 是什么。

interface IconClasses {
    carName: boolean;
    carStatus: boolean;
}

因此，iconClasses 将存储每个图标的实际标志。

// Initialize iconClasses in your Component class.
public iconClasses: IconClasses = {
    carName: false;
    carStatus: false;
}

// ...

sortData = icon => {
    const flag = this.iconClasses[icon];
    this.iconClasses[icon] = !flag;
}

通过更改标志，Angular 会跟踪实际值，以便在场景下交换类。

有太多方法可以实现相同的行为。
以下是我的做法。

顺便说一句，[ngClass] 有很多覆盖，其中一个是我使用的那个，它需要一个对象，其中每个键都是类名，值是 boolean 指示应用或不应用的位置。这是文档中的一些extra information。

希望对你有帮助。

【讨论】：

【解决方案3】：

您将两个表头的ngClasses 绑定到同一个变量：[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>

【讨论】：

感谢您的解决方案有效，它适用于我的用例