javascript - 更改基于 asc 和 dsc 的图标，并将其他列图标保留为默认的 asc 图标，该图标未使用 angular8 激活

Question

我已经动态绑定(bind)了用于对列进行排序的图标，在这里，如果我单击其他列来对前一列进行排序，图标仍处于我单击的状态，但我希望该图标处于默认状态(当前排序除外)列，在这里要对我想要的新列进行排序，必须单击两次才能按照我想要的方式排序，并且必须突出显示当前排序的列。我已经做到了这一点并且罢工了。请帮忙

演示: DEMO

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()
  }

Answer 1

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