如何为PrimeNG的p-columnFilter设置默认true筛选值？

要实现默认只显示someBoolean为true的数据，你可以通过以下两种方式设置p-columnFilter的默认筛选状态：

方法一：初始化表格的筛选器对象 #

直接在组件类中定义初始筛选规则，绑定到表格的filters属性：

1. 在组件.ts文件中添加筛选器初始值：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { MyValue } from './your-path';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  myValues$: Observable<MyValue[]> = getData().pipe(
    map(mvs => [...mvs].sort((a, b) => a.someBoolean < b.someBoolean ? 1 : -1))
  );
  // 初始化筛选器，默认选中someBoolean为true
  tableFilters = {
    someBoolean: { value: true, matchMode: 'equals' }
  };
}

2. 在模板中给p-table添加[filters]绑定：

<p-table    class="my-table"
            [value]="(myValues$ | async)!"
            [scrollable]="true"
            scrollHeight="flex"
            [virtualScroll]="true"
            selectionMode="single"
            [filters]="tableFilters"> <!-- 添加筛选器绑定 -->
    <ng-template pTemplate="header">
        <tr>
            <th>
                Some Boolean
                <div>
                    <p-columnFilter type="boolean" field="someBoolean"></p-columnFilter>
                </div>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-val>
        <tr [pSelectableRow]="val">
            <td>
                <i class="pi" [ngClass]="{'true-icon pi-check': val.someBoolean, 'false-icon pi-times': !val.someBoolean}"></i>
            </td>
        </tr>
    </ng-template>
</p-table>

方法二：通过ViewChild手动触发筛选 #

如果第一种方式在虚拟滚动场景下不生效，可以通过获取表格实例，在组件初始化完成后设置筛选：

1. 在组件.ts文件中引入ViewChild和Table：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Table } from 'primeng/table';
import { Observable } from 'rxjs';
import { MyValue } from './your-path';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  myValues$: Observable<MyValue[]> = getData().pipe(
    map(mvs => [...mvs].sort((a, b) => a.someBoolean < b.someBoolean ? 1 : -1))
  );
  @ViewChild(Table) table!: Table;

  ngAfterViewInit(): void {
    // 延迟执行确保表格和数据已初始化
    setTimeout(() => {
      this.table.filter(true, 'someBoolean', 'equals');
    }, 0);
  }
}

注意事项 #

• 两种方法的matchMode都设为equals，这是布尔类型筛选的默认匹配模式，和p-columnFilter的行为保持一致。
• 使用虚拟滚动时，延迟执行可以避免因表格未完全初始化导致的筛选失效问题。

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