如何使用 V 形上下图标按日期排序（升序和降序）

Question

我想创建一个带有 V 形向上图标的表格。当我单击该图标时，日期数组应按升序排列，当我再次单击该图标时，这一次它的 V 形向下，日期应为按降序排列。如何在角度上实现这一点。所以我有下面的代码，带有人字形图标和日期（作为对象数组返回）

<div class="col-md-12 no-padding sortby">Sort by:Latest<span class="fa fa-chevron-up"></span></div>
<div class="col-md-6 no-padding">
                              <span>{{sample.dates}}</span>
                            </div>

Answer 1

风格：

<span class="fa fa-chevron-up" *ngIf="order" [ngClass]="{'asc': order > 0, 'desc': order < 0}"></span>

在你的课堂上

.fa.fa-chevron-up.asc {
  // Nothing
}
.fa.fa-chevron-up.desc {
  transform: rotate(180deg);
}

对于您的打字稿代码（您必须绑定到按钮）

order = 0;
sort(order: number) {
  this.order = order;
  this.data = this.data.sort((a, b) => order < 0 ? 
    a.createdAt.getTime() - b.createdAt.getTime() : order > 0 ? 
    b.createdAt.getTime() - a.createdAt.getTime() : 0);
}

现在您的数据将被过滤并显示您的 V 形

（免责声明：我不确定您的 chevron 的顺序和方向，所以不要犹豫，在代码和类中颠倒条件）