[英]Apply class on div onclick and toggle class but initially don't set any class and remove class if clicked on other div in Angular / Typescript
I am working on an Angular app where I am showing data in table.我正在开发一个 Angular 应用程序,我在表中显示数据。 Now when I click on any column of data it is sorting data in ascending and descending order.现在,当我单击任何数据列时,它会按升序和降序对数据进行排序。
Now what I want is when I initially load class it should not set any class but when I click on column (td) I want to display a down arrow (for descending order) up arrow(for ascending order).现在我想要的是,当我最初加载类时,它不应该设置任何类,但是当我单击列 (td) 时,我想显示一个向下箭头(用于降序)向上箭头(用于升序)。 Also when I click on other column current column should remove class which I had set.此外,当我单击其他列时,当前列应该删除我设置的类。
But when I load by default down arrow is there on all columns where I only want to set classes on particular td when I click on it and it should get removed if i click on some other class.但是,当我默认加载向下箭头时,所有列上都有我只想在单击它时在特定 td 上设置类的地方,如果我单击其他类,它应该被删除。
Reference link of how actually it should work here reference demo link它实际上应该如何工作的参考链接参考演示链接
Here is my code这是我的代码
data.html数据.html
<tr>
<th (click)="sortAscending(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> State </th>
<th (click)="sortAscendingActive(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> Active Cases </th>
<th (click)="sortAscendingConfirmed(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> Confirmed Cases </th>
<th (click)="sortAscendingDeath(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> Death </th>
</tr>
data.ts数据.ts
status =false
sortByMaxCases(sortedDataBasedOnDate) {
this.isAscendingSort = !this.isAscendingSort;
this.status=true
sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
if (b.confirmed < a.confirmed) {
return -1;
}
if (b.confirmed > a.confirmed) {
return 1;
}
return 0;
}))
this.calculateDiff(this.sortedDataBasedOnDate)
if (!this.isAscendingSort) {
this.status=!this.status
sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
if (a.confirmed < b.confirmed) {
return -1;
}
if (a.confirmed > b.confirmed) {
return 1;
}
return 0;
}))
this.calculateDiff(this.sortedDataBasedOnDate)
}
}
Any help will be great.任何帮助都会很棒。
I don't know of it suits your needs, but since you are using Angular, you could check out Angular Material.我不知道它是否适合您的需求,但由于您使用的是 Angular,您可以查看 Angular Material。 There is a Table component which does exactly what you need and it is pretty easy u to set up.有一个 Table 组件可以完全满足您的需求,并且设置起来非常容易。
Here's a link to the documentation: https://material.angular.io/components/table/overview这是文档的链接: https : //material.angular.io/components/table/overview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.