更改基于asc和dsc的图标，并将其他列图标保留为默认的asc图标，该图标使用angular8无效 [英] Change icons based on asc and dsc and retain other column icons to default asc icon which is not active using angular8

问题描述

我已经动态绑定了用于对列进行排序的图标，在这里，如果我单击其他列来进行排序，则前一列的图标仍保持在我单击的状态，但是我希望该图标处于默认状态，但当前未排序列，然后在此处为我想要的新列进行排序，必须单击2次以使其达到我要排序的方式，并且当前排序必须突出显示.我做到了这一点，并感到震惊.请帮助

i have dynamically binded the icons for sorting the columns, here if i click on other column for sorting previous column icon remains in the state which i had clicked for, but i want that icon to be in default state except the currently sorted column, and here to sort for the new column i want, it must be clicked 2 times to get it the way i want to sort and the current sorted must be highlighted. I have done upto this and struck. Please help

演示:演示

TS:

 public sortAgentList(param) {
      this.sorting = (this.sorting === 'asc') ? 'desc' : 'asc';

      // Change the arrow direction
      this.agentListDetails = this.agentListDetails.map(agentListDetail =>
        agentListDetail.param === param ? {
          ...agentListDetail, icon:
            [...agentListDetail.icon.split(' ').filter(i => i !== 'fa-sort' && i !== 'fa-sort-up' && i !== 'fa-sort-down'),
            this.sorting === 'asc' ? 'fa-sort-up' : 'fa-sort-down'].join(' ')
        } : agentListDetail
      );
     this.getMethod()
  }

推荐答案

我已经在foreach循环中为每个细节设置了图标样式: https://stackblitz.com/edit/angular-ebcwwd

I have set icon style for each detail in a foreach loop: https://stackblitz.com/edit/angular-ebcwwd

这篇关于更改基于asc和dsc的图标，并将其他列图标保留为默认的asc图标，该图标使用angular8无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！