为 PrimeNG 应用自定义中间过滤器：数据表

Question

考虑一个场景，我在p-dataTable列中显示 START 和 END YEAR 。

这是列代码片段：

<p-column field="startYear" header="Active Period" filterPlaceholder="Search" [filter]="true">
  <ng-template let-col let-manual="rowData" pTemplate="body">
    {{record.startYear}} - {{record.endYear}}
  </ng-template>
</p-column>

其中显示为：

|--------------|
| ActivePeriod |
|--------------|
|2015 - 2017   |
|--------------|
|2012 - 2016   |
|--------------|
|2023 - 2025   |
|--------------|
|2024 - 2030   |
|--------------|
|2011 - 2013   |
|--------------|

我想应用自定义过滤器，以便当用户输入 YEAR 时，该表应该只显示属于该活动期间的记录。

这意味着我必须编写一个逻辑来检查用户搜索的年份是否在每个活动期之间。

我怎样才能做到这一点？

Answer 1

首先，您可以添加隐藏的助手字段years，该字段将包含给定范围内的年份数组，因此对于 range 2012 - 2015，我们将获得一个数组：

[
  2012,
  2013,
  2014,
  2015
]

您可以使用map函数来完成它，例如：

const yearsRange = row.endYear - row.startYear + 1;
YOUR_DATA_ARRAY.map(row => ({
  ...row,
  years: [...Array(yearsRange).keys()].map(y => y + row.startYear)
}))

开箱即用PRIME NG没有between过滤器。目前可用的过滤器有：

• 以。。开始
• 包含
• 以。。结束
• 等于
• 不等于
• 在
• 它
• 总吨

您可以扩展它编写自己的过滤器：

// import Table class
import { Table } from 'primeng/components/table/table';

.....

// get reference to your table
@ViewChild('dt') tableRef: Table;

.....

// extend filters
this.tableRef.filterConstraints.between = (value, filter: any): boolean => {
  if (filter === undefined || filter === null || filter === '') {
    return true;
  }

  if (value === undefined || value === null || !value.length) {
    return false;
  }

  return value.some(val => +val === +filter);
};

现在你可以在你的 HTML 中使用它：

<p-table #dt [value]="cars">

  .....

  <input size="4"
         (input)="dt.filter($event.target.value, 'years', 'between')">

  .....

STACKBLITZ：https ://stackblitz.com/edit/angular-sfoh3j ? file = app%2Fapp.component.ts

更新

我注意到您使用旧的（和不建议使用）DataTable，解决方案应该是非常相似的，过滤器几乎是相同的缺失lt和gt。只需更改导入中的名称并在我的示例中键入名称。HTML 语法也不同。如果您需要旧的帮助，请告诉我DataTable