如何基于角色将对象数组条件绑定到PrimeNG p-table？

我有一个包含不同角色（Admin、Evaluator、Recruiter、Applicant）的User类，希望使用同一个用户数组填充两个不同的PrimeNG p-table：第一个表格仅显示Applicant角色的用户，第二个表格显示其余三种角色的用户。

我的用户数组数据如下：

users: User[] = [];

constructor() {
    this.expirationDate = new Date();

    this.users = [{
      id: '1',
      name: "Administrador",
      username: "Admin",
      email: "test@qacg.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "admin"
    }, {
      id: '2',
      name: "Sttefany Klee",
      username: "sttefany.klee",
      email: "test@qacg.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "recruiter"
    }, {
      id: '3',
      name: "Mario Olvera",
      username: "mario.olvera",
      email: "test@gmail.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "evaluator"
    },{
      id: '4',
      name: "Ricardo Ruiz",
      username: "ricardodars",
      email: "test@gmail.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "applicant"
    }, {
      id: '5',
      name: "Dan Olvera",
      username: "dantegalante",
      email: "test@hotmail.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "applicant"
    }];

  }

期望实现类似如下的条件绑定效果：

<p-table #dt [value]="users"> // 添加类似'where user.role != "applicant"'的条件

请问PrimeNG是否支持这种便捷的条件绑定方式？

PrimeNG的p-table本身没有直接支持这种类似SQL WHERE的模板语法，但可以通过以下几种便捷方式实现需求：

方法1：模板内直接过滤数组 #

可以在模板中直接对users数组调用filter方法，实时生成符合条件的子数组：

显示Applicant角色的表格 #

<p-table [value]="users.filter(user => user.role === 'applicant')">
  <!-- 表格列定义 -->
</p-table>

显示其余角色的表格 #

<p-table [value]="users.filter(user => user.role !== 'applicant')">
  <!-- 表格列定义 -->
</p-table>

这种方式简单直接，适合数据量不大的场景，但注意每次变更检测都会重新执行过滤，大数据量下可能影响性能。

方法2：组件内定义计算属性 #

在组件类中定义两个计算属性，提前过滤好数据，模板直接绑定即可：

get applicantUsers(): User[] {
  return this.users.filter(user => user.role === 'applicant');
}

get nonApplicantUsers(): User[] {
  return this.users.filter(user => user.role !== 'applicant');
}

然后模板中绑定：

<!-- Applicant表格 -->
<p-table [value]="applicantUsers">
  <!-- 列定义 -->
</p-table>

<!-- 其余角色表格 -->
<p-table [value]="nonApplicantUsers">
  <!-- 列定义 -->
</p-table>

计算属性会在依赖的users数组变化时自动更新，性能比模板内直接过滤更优，推荐使用。

方法3：使用PrimeNG内置过滤功能 #

如果需要更灵活的过滤（比如支持用户手动切换条件），可以利用p-table的filter相关属性：

1. 给表格添加filterMode="row"或filterMode="menu"开启过滤
2. 在对应列上配置过滤规则，比如针对role列设置默认过滤值：

<p-table #dt [value]="users" filterMode="row">
  <ng-template pTemplate="header">
    <tr>
      <th>角色</th>
      <!-- 其他列 -->
    </tr>
    <tr>
      <th>
        <input pInputText type="text" [(ngModel)]="applicantFilter" (input)="dt.filter($event.target.value, 'role', 'equals')" />
      </th>
      <!-- 其他列过滤控件 -->
    </tr>
  </ng-template>
  <!-- 列内容模板 -->
</p-table>

然后在组件中设置初始过滤值：

applicantFilter = 'applicant';
@ViewChild('dt') dt: Table;

ngAfterViewInit() {
  this.dt.filter('applicant', 'role', 'equals');
}

这种方式适合需要交互性过滤的场景，不过对于固定条件的展示，前两种方法更便捷。

内容的提问来源于stack exchange，提问作者Ricardo Ruíz Alarcón