并将其他列图标保留为默认的asc图标

并将其他列图标保留为默认的asc图标

本文介绍了更改基于asc和dsc的图标,并将其他列图标保留为默认的asc图标,该图标使用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无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 14:06