如何在 Angular 的 primeng 表中添加时间或持续时间的列过滤器

Question

我在角度中使用primeng的p表，我想添加一个列过滤器来过滤时间/持续时间，但我只是找到日期或日期时间，没有精确的解决方案。

我没有获得准确的时间/持续时间列过滤器。

Answer 1

您可以尝试创建自定义过滤器吗？如下所示：

组件.ts

• customDurationFilter 函数有两个参数：value（单元格值）和filter（过滤器值）。
• 它将值和过滤字符串分成几个部分（小时、分钟、秒）并进行比较。如果所有部分都匹配，则返回 true；否则，返回 false。

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent {
  data: any[] = [
    { duration: '00:04:53' },
    { duration: '00:03:20' },
    // Add more data here
  ];

  customDurationFilter(value: string, filter: string): boolean {
    if (!filter) {
      return true;
    }
    const filterParts = filter.split(':').map(part => parseInt(part, 10));
    const valueParts = value.split(':').map(part => parseInt(part, 10));

    for (let i = 0; i < filterParts.length; i++) {
      if (filterParts[i] !== valueParts[i]) {
        return false;
      }
    }
    return true;
  }
}

用表数据源替换数据。然后，在

组件.html

• 使用 p-columnFilter 组件，并将 type="custom" 和 filterFunction 设置为自定义过滤器函数。
• matchMode 设置为“custom”，表示正在使用自定义过滤器功能。

<p-table [value]="data">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="duration">
        Duration
        <p-columnFilter type="custom" [field]="'duration'" [matchMode]="'custom'" [filterFunction]="customDurationFilter" display="menu"></p-columnFilter>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>{{ rowData.duration }}</td>
    </tr>
  </ng-template>
</p-table>