Angular PrimeNG <p-columnFilter> 从 TypeScript 进行过滤时 UI 中断

Question

我正在使用 Angular 18 和 PrimeNG 17，并有一个包含

<p-columnFilter>

组件的表格。通过 UI 进行过滤工作正常，但是当我使用 TypeScript 中的

filter()

函数以编程方式进行过滤时，

<p-columnFilter>

UI 会中断并出现以下错误：

错误运行时错误：NG02200：找不到不同的支持对象 类型为“对象”的“[对象对象]”。 NgFor 仅支持绑定到 可迭代对象，例如数组。您的意思是使用键值管道吗？

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>

打字稿：

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

重现步骤：

• 单击“名称”列上的过滤图标可查看过滤 UI。
• 在 ngAfterViewInit() 中以编程方式应用过滤器。
• 预期行为：即使在以下情况下，

  <p-columnFilter>

  UI 也应保持功能 过滤是通过编程完成的。

复制者： https://stackblitz.com/edit/gsfshm?file=src%2Fapp%2Ftable-filter-advanced-demo.ts

我在 Gitlab 上创建了一个问题，有谁知道这个错误何时出现？

谢谢

Answer 1

当 Angular 完成初始更改检测后对绑定进行更改时，通常会触发该错误。
要解决此问题，您可以使用 setTimeout 将代码包装在 ngAfterViewInit 中。

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

你可以在 Stackblitz 上看到一个例子：
https://stackblitz.com/edit/gsfshm-wrmtwe?file=src%2Fapp%2Ftable-filter-advanced-demo.html