Question

我想创建一个带有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形图标将会显示

（免责声明：我不确定你的人字形的顺序和方向，所以不要犹豫，反思代码和课程中的条件）

如何使用雪佛龙上下图标按日期排序（升序和降序）

1 个答案: