如何在没有第三方的情况下使用 Angular/Typescript 对 HTML 表进行排序？答案

【问题标题】：How can I sort HTML table using Angular/Typescript without 3rd party?如何在没有第三方的情况下使用 Angular/Typescript 对 HTML 表进行排序？
【发布时间】：2020-03-08 06:47:34
【问题描述】：

所以我有一个 html 表，其中的行和列是从我的用户中插入的，例如他的姓名、上次登录日期等。

之前我们使用 Prime NG 的 customSort 功能，但现在我们正在消除这些功能，因此我需要制作自己的排序功能。

我可以在不使用 AngularJS、JavaScript、Bootstrap、Angular Material 或任何 3rd 方的东西的情况下制作它吗？如果是，怎么做？

我花了 2 天时间在谷歌上搜索，但没有找到任何不包含上述方法之一的解决方案。

我现在的 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 的标题上使用它，但我不知道如何做更多。我应该在每个列上使用不同的排序功能吗？或者应该怎么写？

提前谢谢你！

【问题讨论】：

标签： html angular typescript sorting columnsorting

【解决方案1】：

一个非常简单的实现将涉及：

使每个列标题可点击

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

然后按控制器中的该属性对您的items 列表进行排序

sort(colName) { this.items.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0) }

【讨论】：

谢谢！我对代码进行了一些编辑，现在它就像魔术一样工作，也可以升序和降序！

【解决方案2】：

Paul 用他的函数正确回答了这个问题，但我想对其进行一些更改以切换输出。该函数仅按升序返回输出。

这是一个切换升序和降序的建议-

<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
    }
}

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

【讨论】：