在 div onclick 上应用类并切换类，但如果单击 Angular / Typescript 中的其他 div，最初不设置任何类并删除类答案

【问题标题】：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在 div onclick 上应用类并切换类，但如果单击 Angular / Typescript 中的其他 div，最初不设置任何类并删除类
【发布时间】：2020-04-02 08:19:09
【问题描述】：

我正在开发一个在表格中显示数据的 Angular 应用程序。现在，当我单击任何数据列时，它会按升序和降序对数据进行排序。

现在我想要的是，当我最初加载类时，它不应该设置任何类，但是当我单击列 (td) 时，我想显示一个向下箭头（用于降序）向上箭头（用于升序）。此外，当我单击其他列时，当前列应该删除我设置的类。

但是当我默认加载时，所有列上都有向下箭头，当我点击它时我只想在特定 td 上设置类，如果我点击其他类，它应该被删除。

实际应该如何工作的参考链接reference demo link

这是我的代码

data.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

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

任何帮助都会很棒。

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

我不知道它是否适合您的需求，但由于您使用的是 Angular，您可以查看 Angular Material。有一个 Table 组件可以完全满足您的需求，而且您很容易设置。

这是文档的链接： https://material.angular.io/components/table/overview

【讨论】：