如何在Angular/Typescript中不使用第三方库对HTML表格进行排序？

Question

我有一个 HTML 表格，其中的行和列是从用户数据中插值出来的，例如他的姓名、上次登录日期等。

之前我们使用了 Prime NG 的 customSort 函数，但现在我们在消除这些依赖，因此我需要制作自己的排序函数。

在不使用 AngularJS、JavaScript、Bootstrap、Angular Material 或任何第三方工具的情况下，我能否实现它？如果可以，如何实现？

我花了两天时间只是通过 Google 搜索，但没有找到不包含上述方法之一的解决方案。

目前我的 HTML 表格如下：

<table class="table" scrollHeight="calc(100vh - 170px)">
    <tr>
      <th class="tableHeader" *ngFor="let col of tableHeaders">
        {{ col.header | translate }}
        <my-icon
          *ngIf="col.field !== 'access_level'"
          [icon]="Icon.sort"
        ></my-icon>
      </th>
    </tr>
    <tr *ngFor="let item of items">
      <td>
        <span class="normalColoumn"> {{ item.firstname }}</span>
      </td>
      <td>
        <span class="normalColoumn"> {{ item.lastname }}</span>
      </td>
      <td>
        <span class="normalColoumn"> {{ item.email }}</span>
      </td>
      <td>
        <span class="normalColoumn" *ngFor="let roleId of item.roleIds">
          {{ getUserRole(roleId).name }}</span
        >
      </td>
      <td>
        <span class="left">
          {{
            item.lastLoginDate
              ? (item.lastLoginDate | fromnow)
              : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
          }}
        </span>
        <span class="only-show-on-hover">
          <my-icon [icon]="Icon.edit"></my-icon>
          <my-icon [icon]="Icon.password"></my-icon>
          <my-icon [icon]="Icon.delete"></my-icon>
        </span>
      </td>
    </tr>
  </table>

我知道我应该编写一个函数并使用Angular的onClick函数将其应用到表头，但我不知道该如何做。我应该在每个列上使用不同的排序函数吗？还是该怎样编写它？

提前感谢您！

- kameholic1582

Answer 1

一个非常简单的实现方式是：

使每个列标题可点击 <th class="tableHeader" *ngFor="let col of tableHeaders" (click)="sort(col.propertyName)"> 然后在控制器中通过该属性对您的项列表进行排序 sort(colName) { this.items.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0) }

- paul

---

谢谢！我对代码进行了一些编辑，现在它像魔法一样工作，而且可以升序和降序！ - kameholic1582

Answer 2

保罗用他的函数正确地回答了问题，但我想对它进行一些改变以切换输出。

该函数仅按升序返回输出。

这里是一个建议，可以切换升序和降序 -

<th class="tableHeader" *ngFor="let col of tableHeaders" (click)="sort(col.propertyName, booleanValue)">

在你的TS文件中声明一个布尔变量，如下所示：

    booleanValue: any = false;

然后在TS文件中使用此函数。

sortFunction(colName, boolean) {
    if (boolean == true){
        this.data.sort((a, b) => a[colName] < b[colName] ? 1 : a[colName] > b[colName] ? -1 : 0)
        this.booleanValue = !this.booleanValue
    }
    else{
        this.data.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0)
        this.booleanValue = !this.booleanValue
    }
}

现在您可以按升序和降序排序。谢谢。

- Omkar Hande