带有箭头图标的角度自定义排序答案

【问题标题】：Custom sorting in angular with arrow icons带有箭头图标的角度自定义排序
【发布时间】：2021-05-14 20:28:03
【问题描述】：

我有一个要求，在 HTML 表格中，我必须根据属性名称对表格的值进行排序。请参考下面的代码

<h2>{{modifiedBy}} {{order}}</h2>
<table class="table table-striped border mt-1">
    <thead>
        <tr>
            <th scope="col" (click)="sortBy('id', 'desc')">Id <i *ngIf="modifiedBy!=='id'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && modifiedBy==='id'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='id'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('name', 'desc')">Name
                <i *ngIf="modifiedBy!=='name'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && modifiedBy==='name'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='name'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('age', 'desc')">Age
                <i *ngIf="modifiedBy!=='age'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && modifiedBy==='age'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='age'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('dob', 'desc')">Date Of Birth
                <i *ngIf="order==='asc' && modifiedBy==='dob'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && modifiedBy==='dob'" class="fa fa-arrow-up"></i>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of dataList | orderBy:modifiedBy:order:dateType">
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.dob }}</td>
        </tr>
    </tbody>
</table>

加载时，表格将使用“dob”属性按降序排序，“dob”表格标题单元格的箭头图标将有一个向上的箭头，其余部分将向下（asc：向下箭头，描述：向上箭头）。

现在，每当我单击要排序的任何表头单元格时，我想做的是根据单击的表头单元格的属性对表数据进行排序，并且箭头图标应根据 asc 或描述请注意，在对表头进行排序时，不应干扰其他表头单元格的箭头图标。

我已经提出了一些部分工作的代码。我无法继续前进，因为我正在努力解决其余的逻辑。此外，我为每个表头有条件地使用了两个图标。是否可以为每个表头使用一个图标？

StackBlitz

【问题讨论】：

标签： html angular typescript

【解决方案1】：

就我个人而言，我会让 Age 和 DOB 箭头指向相同的方向，理论上它们应该是相同的顺序（除非年龄基于不同记录的不同日期）。

<h2>{{modifiedBy}} {{order}}</h2>
<table class="table table-striped border mt-1">
    <thead>
        <tr>
            <th scope="col" (click)="sortBy('id', 'desc')">Id 
                <i *ngIf="order==='desc' || modifiedBy!=='id'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='id'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('name', 'desc')">Name
                <i *ngIf="order==='desc' || modifiedBy!=='name'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='name'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('age', 'desc')">Age
                <i *ngIf="order==='asc' || (modifiedBy!=='dob' && modifiedBy!=='age')" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && (modifiedBy==='dob' || modifiedBy==='age')" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('dob', 'desc')">Date Of Birth
                <i *ngIf="order==='asc' || (modifiedBy!=='dob' && modifiedBy!=='age')" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && (modifiedBy==='dob' || modifiedBy==='age')" class="fa fa-arrow-up"></i>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of dataList | orderBy:modifiedBy:order:dateType">
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.dob }}</td>
        </tr>
    </tbody>
</table>

但是，如果您希望它们保持独立：

<h2>{{modifiedBy}} {{order}}</h2>
<table class="table table-striped border mt-1">
    <thead>
        <tr>
            <th scope="col" (click)="sortBy('id', 'desc')">Id 
                <i *ngIf="order==='desc' || modifiedBy!=='id'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='id'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('name', 'desc')">Name
                <i *ngIf="order==='desc' || modifiedBy!=='name'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='name'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('age', 'desc')">Age
                <i *ngIf="order==='desc' || modifiedBy!=='age'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='asc' && modifiedBy==='age'" class="fa fa-arrow-up"></i>
            </th>
            <th scope="col" (click)="sortBy('dob', 'desc')">Date Of Birth
                <i *ngIf="order==='asc' || modifiedBy!=='dob'" class="fa fa-arrow-down"></i>
                <i *ngIf="order==='desc' && modifiedBy==='dob'" class="fa fa-arrow-up"></i>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of dataList | orderBy:modifiedBy:order:dateType">
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.dob }}</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案2】：

由于您使用的是 Angular，因此有一些库可以实现排序表。当您需要快速交付某些东西并且您没有时间浪费在琐碎的事情上时，这会有所帮助。但这也取决于您的要求。例如，您可以在 Angular 应用程序https://swimlane.github.io/ngx-datatable/ 中安装 ngx-datatable 包。这些是高度可配置的，并且还带有一些不错的设计。

我试图查看您的示例中的问题所在。代码有点乱，我试图满足所有条件，因为当您单击另一个标题时没有 dob 条件。您可以使用条件来获得正确的行为：

第一步，您可以如下实现 OnIgnit。

import { Component, OnInit, VERSION } from "@angular/core";

export class AppComponent implements OnInit {
name = "Angular " + VERSION.major;
modifiedBy = "";
order = "";
dateType = "";

ngOnInit(): void {
 this.order = "desc";
 this.modifiedBy = "dob";
 this.dateType = "date";
}

将 orderBy 重新分配给 order。

sortBy(propertyName, orderBy) {
this.order = orderBy;
if (propertyName === "dob") {
this.dateType = "date";
} else {
 this.dateType = "";
}
this.modifiedBy = propertyName;
if (this.order === "asc") {
 this.order = "desc";
 } else if (this.order === "desc") {
 this.order = "asc";
}

} }

在您的 HTML 中，单击另一个标题时该图标会消失，我认为您在单击另一个标题时也需要拥有所有可能的选项。

 <th scope="col" (click)="sortBy('dob', 'desc')">Date Of Birth
         <i *ngIf="order==='desc' && modifiedBy==='dob'" class="fa fa-arrow-up"></i>
         <i *ngIf="order==='asc' && modifiedBy==='dob'" class="fa fa-arrow-down"></i>
         <i *ngIf="order==='asc' && modifiedBy==='name'" class="fa fa-arrow-up"></i>
         <i *ngIf="order==='desc' && modifiedBy==='name'" class="fa fa-arrow-up"></i>
         <i *ngIf="order==='asc' && modifiedBy==='age'" class="fa fa-arrow-up"></i>
         <i *ngIf="order==='desc' && modifiedBy==='age'" class="fa fa-arrow-up"></i>
         <i *ngIf="order==='asc' && modifiedBy==='id'" class="fa fa-arrow-up"></i>
         <i *ngIf="order==='desc' && modifiedBy==='id'" class="fa fa-arrow-up"></i>
     </th>

【讨论】：