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

Question

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

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

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

它实际上应该如何工作的参考链接参考演示链接

这是我的代码

数据.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>

数据.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)
    }
  }

任何帮助都会很棒。

Answer 1

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

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