问题描述
我已经动态绑定了用于对列进行排序的图标,在这里,如果我单击其他列来进行排序,则前一列的图标仍保持在我单击的状态,但是我希望该图标处于默认状态,但当前未排序列,然后在此处为我想要的新列进行排序,必须单击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无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!