如何将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';
}

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

Answer 1

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

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

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>

Answer 2

无论 class 是其中一个，您都只是两个boolean 4E2C64F38F78BA3EA5C905AB5A2DA27Z。

<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 会跟踪实际值，因此 class 将在场景下交换。

有太多方法可以实现相同的行为。
这就是我将如何做到的。

顺便说一句， [ngClass]有很多覆盖，其中一个是我使用的那个，它需要一个 object，其中每个键都是 class 名称，值是一个boolean指示。
以下是文档中的一些额外信息。

希望能帮助到你。

Answer 3

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

1）如果您希望 class 仅适用于th一个，则仅将ngClass应用于 Car Name th

或者

2）只需在 ngClass 中调用 function 并传递一个类似的标志

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

并在 function 做这样的事情。

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