單擊時將類動態添加到 td，並在 angular/typescript 中單擊其他 td 時切換和刪除

Question

我在 angular 應用程序中工作，我正在處理 COVID 19 應用程序。我有一個有 5 列的表格

• 1. 狀態
• 2. 確認的
• 3. 積極的
• 4. 恢復
• 5. 死者

這是我的堆棧閃電戰鏈接堆棧閃電戰鏈接。

這里也是我的期望的參考期望。

單擊任何列時，我正在按升序或降序對整個表格數據進行排序，並顯示用於升序的向上箭頭和用於降序的向下箭頭。

我的問題是當我單擊任何列時，所有列上的所有箭頭都會更改，因為我只想更改我單擊的列的箭頭並隱藏其他列的箭頭。 同樣最初當頁面加載時，我的箭頭不應該可見，而是只有當我單擊任何列時它們才應該可見。

這是我的代碼

組件.html

               <tr>
                    <th (click)="sortAscending(sortedDataBasedOnDate)" class="sticky state-heading">
                        <div class="heading-content"><abbr title="State">State/UT</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxCases(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Confirmed">Confirmed</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxActive(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Active">Active</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxRecovered(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Recovered">Recovered</abbr>
                            <div></div>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>

                    <th (click)="sortByMaxDeath(sortedDataBasedOnDate)" class="sticky">
                        <div class="heading-content"><abbr class="" title="Deaths">Deceased</abbr>
                            <div [ngClass]="showarrow  ? 'down-arrow' : 'up-arrow'"></div>
                        </div>
                    </th>
                </tr>

組件.ts

 showarrow=false


 sortAscending(data) {
    this.isAscendingSort = !this.isAscendingSort;
    this.showarrow=true                                 // setting here
    data.forEach(item => item.statewise.sort(function (a, b) {
      if (b.state < a.state) {
        return -1;
      }
      if (b.state > a.state) {
        return 1;
      }
      return 0;
    }))
    this.calculateDiff(this.sortedDataBasedOnDate)

    if (!this.isAscendingSort) {
    this.showarrow=!this.showarrow           // for descending toggling class here
      let a = data.forEach(item => item.statewise.sort(function (a, b) {
        if (a.state < b.state) {
          return -1;
        }
        if (a.state > b.state) {
          return 1;
        }
        return 0;
      }))
      this.calculateDiff(this.sortedDataBasedOnDate)
    }
  }

我也嘗試過這種方法來在頁面加載時最初隱藏箭頭，但它有同樣的問題，如果我點擊任何列箭頭將出現在所有列上。

組件.html

   <div class="heading-content"><abbr title="State">State/UT</abbr>
        <div [ngClass]="{'down-arrow':showarrowdesc , 'up-arrow' : 
         showarrowasc,'hide':hide}"></div>

    </div>

組件.ts

 showarrowasc=false
 showarrowdesc=false
 hide=true

 sortAscending(data) {
    this.isAscendingSort = !this.isAscendingSort;
    this.showarrowasc=!this.showarrowasc
    this.showarrowdesc=false
    
    data.forEach(item => item.statewise.sort(function (a, b) {
      if (b.state < a.state) {
        return -1;
      }
      if (b.state > a.state) {
        return 1;
      }
      return 0;
    }))
    this.calculateDiff(this.sortedDataBasedOnDate)

    if (!this.isAscendingSort) {
    
    this.showarrowdesc=!this.showarrowdesc;
    this.showarrowasc=false
      let a = data.forEach(item => item.statewise.sort(function (a, b) {
        if (a.state < b.state) {
          return -1;
        }
        if (a.state > b.state) {
          return 1;
        }
        return 0;
      }))
      this.calculateDiff(this.sortedDataBasedOnDate)
    }
  }

任何幫助都會很棒。

Answer 1

我猜您正在削減您提供的代碼，因為我看不到您從模板中調用的 sortByMaxCases()（以及除 sortAscending() 之外的其他代碼）。

然后，從我在這里看到的情況來看，您似乎正在使用相同的布爾值切換所有列：showarrow。

為了克服這個問題，您可以例如創建一個包含多個屬性的對象，每列一個，如下所示：

const showArrows = {
    confirmed: false,
    active: false
}

添加您擁有的所有其他列，並將其中一個定義為 true 作為初始排序。

然后在您的模板中引用該對象，如下所示：

<th (click)="sortAscending(sortedDataBasedOnDate)" class="sticky state-heading">
    <div class="heading-content"><abbr title="State">Confirmed</abbr>
        <div [ngClass]="showArray.confirmed ? 'down-arrow' : 'up-arrow'"></div>
    </div>
</th>

以確認列為例。

希望能幫助到你。