Динамически добавлять класс к тд при щелчке и переключать и удалять при нажатии на тд в angular / typcript

Question

Я работаю в приложении angular, где я работаю в приложении COVID 19. У меня есть таблица с 5 столбцами

• 1. STATE
• ПОДТВЕРЖДЕНО
• ACTIVE
• ВОССТАНОВЛЕНО
• УМЕНЬШЕНО

Вот моя блиц-ссылка стека блиц-ссылка стека .

Также есть ссылка на мои ожидания Ожидание .

При нажатии на любой столбец я сортирую данные всей таблицы в порядке возрастания или убывания и отображаю стрелку вверх для восходящей и стрелку вниз для нисходящей.

Моя проблема заключается в том, что, когда я нажимаю на любой столбец, все стрелки на всех столбцах меняются, когда я хочу изменить только стрелку для столбца, который щелкнул, и скрыть стрелки для других столбцов. Также изначально, когда страница загружается, моя стрелка не должна становиться видимой, вместо этого они должны быть видны только при нажатии на любой столбец.

Вот мой код

компонент. 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>

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

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

Как пример для подтвержденного столбца.

Надеюсь, это поможет.