如何为Angular中PrimeNG Table创建自定义风向列过滤器

需求场景 #

需要为PrimeNG Table的风向列（数据格式示例：256° SW、202° S）实现多选过滤器：当用户选择「North」时，自动过滤出所有包含N的风向数据（如N、NE、NW），其他方向选项同理。

解决方案步骤 #

1. 调整多选组件的参数与回调逻辑 #

修改HTML中的<p-multiSelect>和<p-columnFilter>配置，让过滤器传递风向代码（如N、SW）而非显示文本，同时绑定自定义过滤函数：

<th pSortableColumn="direction">Wind Direction <p-sortIcon field="direction"></p-sortIcon>
  <p-columnFilter 
    field="direction" 
    display="menu" 
    [showMatchModes]="false" 
    [showOperator]="false" 
    [showAddButton]="false"
    [filterFunction]="windDirectionFilter"> <!-- 绑定自定义过滤函数 -->
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
        <p-multiSelect 
          [ngModel]="value" 
          [options]="windDirections" 
          placeholder="Any" 
          <!-- 将选中的选项映射为code数组传给过滤器 -->
          (onChange)="filter($event.value.map(opt => opt.code))" 
          optionLabel="direction"
          optionValue="code">
            <ng-template let-option pTemplate="item">
                <div class="p-multiselect-wind-option">
                  <span class="pi pi-compass mr-5px"></span>
                  <span style="margin-left: 5px;">{{option.direction}}</span>
                </div>
            </ng-template>
        </p-multiSelect>
    </ng-template>
  </p-columnFilter>
</th>

2. 实现自定义过滤函数 #

在组件TS文件中添加自定义过滤逻辑，提取风向数据中的代码部分，判断是否匹配选中的过滤条件：

// 自定义风向过滤函数
windDirectionFilter(value: string, filters: string[]): boolean {
  // 没有选中任何选项时，返回所有数据
  if (!filters || filters.length === 0) return true;
  
  // 从数据中提取风向代码（比如从"245° SW"中得到"SW"）
  const directionCode = value.split(' ')[1];
  
  // 检查风向代码是否包含任意一个选中的过滤code
  // 例如选中"N"时，会匹配"N"、"NE"、"NW"
  return filters.some(filterCode => directionCode.includes(filterCode));
}

3. 确保数据格式正确性 #

确认WeatherDataItem中的direction字段为"角度 风向代码"格式（如"245° SW"），保证过滤函数能正确提取风向代码。

原理说明 #

• 多选组件触发筛选时，将选中的风向选项转换为对应的代码数组（如选North则传['N']）
• 自定义过滤函数遍历每一行的风向数据，提取代码后与选中的过滤code进行模糊匹配
• 通过some()方法实现「匹配任意选中条件」的多选逻辑，符合多选过滤器的预期行为

内容的提问来源于stack exchange，提问作者krk5570