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

所以我有一个html表，其中的行和冒号是从我的用户中插入的，比如他的名字、上次登录日期等等

之前我们使用了Prime NG的customSort函数，但现在我们正在删除这些函数，因此我需要创建自己的排序函数

我可以不用AngularJS、JavaScript、Bootstrap、Angular材质或任何第三方的东西来制作它吗？如果是，如何进行

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

目前我的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>

{{col.header | translate}}
{{item.firstname}
{{item.lastname}
{{item.email}
{{getUserRole（roleId.name}}
{{
item.lastLoginDate
？（item.lastLoginDate |从现在起）
：（'USER_MANAGEMENT.UNKNOWN_LAST_LOGIN'| translate）
}}

我知道我应该创建一个函数，并在带有Angular的onClick的标题上使用它，但我不知道如何做得更多。我应该在每个列上使用不同的排序功能吗？或者我该怎么写

---

提前谢谢你

一个非常简单的实现包括：

使每个列标题都可单击

然后在控制器中按该属性对

项目

列表进行排序

排序（colName）{
this.items.sort（（a，b）=>a[colName]>b[colName]？1:a[colName]}

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

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

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

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

sortFunction（colName，boolean）{
如果（布尔==真）{
this.data.sort（（a，b）=>a[colName]b[colName]？-1:0）
this.booleanValue=！this.booleanValue
}
否则{
this.data.sort（（a，b）=>a[colName]>b[colName]？1:a[colName]

现在可以按升序和降序进行排序。多谢各位

---

非常感谢。我对代码做了一些编辑，现在它像魔术一样工作，升序和降序！

    booleanValue: any = false;

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