Angular18+PrimeNG17：<p-columnFilter>编程式过滤UI崩溃问题

错误信息 #

ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?

场景描述 #

在Angular 18搭配PrimeNG 17的项目中，使用<p-columnFilter>组件时，通过UI界面过滤功能正常，但在TypeScript中调用filter()方法进行编程式过滤时，<p-columnFilter>的UI出现崩溃，抛出上述错误。

代码片段 #

HTML代码 #

<p-columnFilter
  field="name"
  matchMode="in"
  display="menu"
  [showMatchModes]="false"
  [showOperator]="false"
  [showAddButton]="false"
>
  <ng-template pTemplate="header">
    <div class="px-3 pt-3 pb-0">
      <span class="font-bold">Name</span>
    </div>
  </ng-template>
  <ng-template pTemplate="filter" let-value let-filter="filterCallback">
    <p-multiSelect
      [ngModel]="selectedNames"
      [options]="names"
      placeholder="Any"
      (onChange)="filter($event.value)"
      optionLabel="name"
    >
      <ng-template let-option pTemplate="item">
        <div class="inline-block vertical-align-middle">
          <span class="ml-1 mt-1">{{ option.name }}</span>
        </div>
      </ng-template>
    </p-multiSelect>
  </ng-template>
</p-columnFilter>

TypeScript代码 #

ngAfterViewInit(): void {
  this.selectedNames = [{ name: 'James Butt' }];
  this.table?.filter(this.selectedNames, 'name', 'in');
}

复现步骤 #

• 点击Name列的过滤图标查看过滤UI；
• 在ngAfterViewInit()中执行编程式过滤；
• 预期行为：即使通过编程方式过滤，<p-columnFilter>的UI仍应保持可用。

错误原因分析 #

这个错误核心是NgFor指令尝试遍历非可迭代对象，结合PrimeNG的in匹配模式工作机制，问题出在编程式过滤的参数格式上：

1. in模式的参数要求不符：PrimeNG的in匹配模式，编程式过滤需要传递字段对应原始值的数组，而非对象数组。比如name字段对应字符串值，应该传['James Butt']，而非[{ name: 'James Butt' }]。
2. UI组件同步逻辑异常：当传入对象数组作为过滤参数时，PrimeNG内部可能将这个错误格式的值同步到<p-multiSelect>组件，导致组件内部遍历该值时触发NgFor的非可迭代对象错误。
3. 双向绑定格式不匹配：selectedNames是对象数组，但过滤逻辑期望的是原始值数组，格式不匹配导致组件状态同步时出现遍历错误。

修复建议 #

修改TypeScript代码，传递name字段的原始值数组作为过滤参数：

ngAfterViewInit(): void {
  this.selectedNames = [{ name: 'James Butt' }];
  // 提取name字段的原始值作为过滤参数
  this.table?.filter(this.selectedNames.map(item => item.name), 'name', 'in');
}

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