angular - PrimeNG DataTable 自定义排序或过滤(Angular 2)

Question

我在 PrimeNg 数据表中的排序/过滤日期列中遇到问题。因为我正在显示日期“dd/mm/yyyy”字符串。

1. 如果使用模板来显示“dd/mm/yyyy”，则过滤器无法作为过滤器处理日期 ISO 格式的实际数据绑定(bind)。
2. 如果从后端将数据转换为字符串格式，则排序不正确，因为它按字符串而不是日期排序。

Answer 1

我使用 moment.js 解决了这个问题，因为它更简单、更快速，但如果您想在没有任何框架的情况下进行，代码总是可以定制一些(我希望少一些 if 条件和字符串转换)

所以你必须将 moment.js 添加到你的项目中:a) 将 src 链接添加到您的主 html 索引文件(主 Angular 选择器、polyfills 等)从此站点 https://cdnjs.com/libraries/moment.js/b) 但如果是生产环境，我建议通过 npm 添加它。 http://momentjs.com/docs/这里还有其他可能性。

那么你必须在import语句下和@Component注解之上声明moment变量

declare var moment;

然后，如果您已经将 primeng 模块添加到您的项目中，则在 primeng 的 p-dataTable 标签内的 html 文件中有 p-column 标签，在此标签中我们需要添加 sortable="custom"和 (sortFunction)= "mysort($event)"像这样:

<p-column field="date" header="Data" sortable="custom" (sortFunction)="mysort($event)"></p-column>

使用 p 列标签显示的日期采用 DD.MM.YYYY 字符串格式，例如:03.01.2017

之后，在我们获取数据并将数据推送到数组的组件中，数组用于在表中显示数据，在我名为 appointments 的示例中，我们需要添加名为 mysort 的函数(因为我们在 html p-列标签)

mysort(event) {
    let comparer = function (a, b): number {
      let formatedA = moment(a.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let formatedB = moment(b.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let result: number = -1;

      if (moment(formatedB).isBefore(formatedA, 'day')) result = 1;
      return result * event.order;
    };

    this.appointments.sort(comparer);
}

在我的示例中，a.date 和 b.date 是一个类似于“21.12.2016”的字符串，我们需要将其格式化为 YYYY-MM-DD。然后我们只是比较日期。

仅此而已，我检查了这段代码并且它有效。我希望它能帮助别人，如果解释是用教程风格写的，请原谅，但这是我的第一个答案，我想以正确的方式来做:)