PrimeNG Table嵌套列（favourite.name）过滤实现方案咨询

方案1：自定义过滤函数（适配嵌套字段） #

PrimeNG Table支持自定义过滤逻辑，针对嵌套属性可以直接编写匹配函数：

1. 在组件类中定义过滤逻辑：

import { FilterService } from 'primeng/api';

constructor(private filterService: FilterService) {
  // 注册自定义过滤器
  this.filterService.register('hobbyFilter', (value: any, filter: string) => {
    if (!filter) return true;
    // 统一转小写，实现大小写不敏感匹配
    const targetName = value.hobbies?.favourite?.name?.toLowerCase() || '';
    return targetName.includes(filter.toLowerCase());
  });
}

2. 在HTML模板中绑定该过滤器：

<p-table [value]="customers" #dt>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>
        Favourite Hobby
        <!-- 触发自定义过滤，指定过滤字段标识和过滤器名称 -->
        <input type="text" pInputText (input)="dt.filter($event.target.value, 'hobby', 'hobbyFilter')" />
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr>
      <td>{{customer.name}}</td>
      <td>{{getHobbies(customer)}}</td>
    </tr>
  </ng-template>
</p-table>

方案2：映射嵌套字段到顶层（更简便） #

如果不想编写自定义过滤器，可以提前将嵌套属性映射为对象的顶层字段，直接使用PrimeNG默认过滤：

1. 在组件初始化时处理数据：

ngOnInit() {
  // 给每个customer添加顶层的爱好名称字段，处理空值避免报错
  this.customers = this.customers.map(item => ({
    ...item,
    favouriteHobby: item.hobbies?.favourite?.name || ''
  }));
}

2. 在模板中直接使用顶层字段过滤：

<p-table [value]="customers" #dt>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>
        Favourite Hobby
        <!-- 直接用默认的contains过滤规则 -->
        <input type="text" pInputText (input)="dt.filter($event.target.value, 'favouriteHobby', 'contains')" />
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr>
      <td>{{customer.name}}</td>
      <td>{{customer.favouriteHobby}}</td>
    </tr>
  </ng-template>
</p-table>

关键注意点 #

• 必须处理hobbies或favourite为null/undefined的场景，避免出现空指针错误
• 统一转换为小写实现大小写不敏感匹配，提升用户体验

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