在 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