angular - 为 PrimeNG : Datatable 应用自定义 In Between 过滤器

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，它将包含给定范围内的年份数组，因此对于范围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 过滤器。 Filters available currently是:

• 开始于
• 包含
• 结尾为
• 等于
• 不等于
• 在
• lt
• gt

您可以通过编写自己的过滤器来扩展它:

// 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，解决方案应该非常相似，filters几乎相同的缺失 lt 和 gt。在我的示例中，只需更改导入中的名称和类型名称。 HTML 语法也不同。如果您需要有关旧 DataTable

的帮助，请告诉我