我在p-table列中有一个如下所示的数据

太阳一号, 太阳二号, 不,不,不. 太阳-11, 太阳-12,

在进行排序时,它的行为是异常的.它不是根据破折号后的数字进行排序.如何用这种格式实现排序.

我try 添加自定义排序

html <p-table sortFunction)="customSort($event)" [customSort]="true"></p-table>

.ts

    customSort(event: SortEvent) {
       event.data.sort((data1, data2) => {

        let value1 = data1[event.field];

        let value2 = data2[event.field];

        let result = null;

        if (value1 == null && value2 != null)
            result = -1;
        else if (value1 != null && value2 == null)
            result = 1;
        else if (value1 == null && value2 == null)
            result = 0;
        else if (typeof value1 === 'string' && typeof value2 === 'string')
            result = value1.localeCompare(value2);
        else
            result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

        return (event.order * result);
    });
   }

在这里,我链接了类似问题的堆栈闪电战代码: https://stackblitz.com/edit/primeng-tablesort-demo-rfn6zn?file=src%2Fapp%2Fproductservice.ts,src%2Fassets%2Fproducts-small.json

推荐答案

您可以提取数值,然后当值包含SUN时进行比较.请判断以下代码.

  sortTableData(event) {
    console.log(event);
    event.data.sort((data1, data2) => {
      let value1 = data1[event.field];
      let value2 = data2[event.field];
      let result = null;
      if (value1 == null && value2 != null) {
        result = -1;
      } else if (value1 != null && value2 == null) {
        result = 1;
      } else if (value1 == null && value2 == null) {
        result = 0;
      } else if (typeof value1 === 'string' && typeof value2 === 'string') {
        if (value1.includes('SUN') && value2.includes('SUN')) {
          const leftSplit = value1.split(' - ');
          const rightSplit = value2.split(' - ');
          const left = leftSplit.length ? +leftSplit[1] : 0,
            right = rightSplit.length ? +rightSplit[1] : 0;
          result = left < right ? -1 : left > right ? 1 : 0;
        } else {
          result = value1.localeCompare(value2);
        }
      } else {
        result = value1.localeCompare(value2);
      }
      return event.order * result;
    });
  }

stackblitz

Angular相关问答推荐

NG构建后多余的国旗

带输入的单位测试Angular 分量.需要

是否可以将Angular 路由配置为在点击带有本地人力资源S的锚点时更新Angular 路由?

Angular 15:将数据从主零部件传递到辅零部件

如何重新显示ngbAlert(Bootstrap widgest for Angular)消息后再次驳回它

当在server.ts文件中定义API路径时,Angular 17构建失败

如何在Angular功能路由保护中取消订阅RxJs主题

一次重定向后,所有子路由都处于活动状态

Angular 路由中的模块构建失败

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

Angular p-triStateCheckbox for each Select 更改不同的 colored颜色

执行ng generate environments时出错时需要合集和原理图

Summernote 文本区域的输入字段文本验证失败

如何在 Angular 中将tailwind 类传递给 fontawesome

Angular模板错误:Property does not exist on type component

Angular 没有可用于依赖类型的模块工厂:ContextElementDependency

设置 Angular Material Tooltip 的字体大小

ERROR 错误:StaticInjectorError(AppModule)[UserformService -> HttpClient]:

移除 Angular 组件创建的宿主 HTML 元素 Select 器

Angular2 - 如何开始以及使用哪个 IDE