PrimeNG Table恢复过滤状态报错：Cannot set properties of undefined (setting 'filters')

错误原因 #

ngOnInit钩子执行时，PrimeNG Table组件（模板中的#dt）还未完成视图初始化，导致this.dt为undefined，直接赋值filters就会触发类型错误。

解决方案 #

1. 调整生命周期钩子，使用ngAfterViewInit #

将恢复过滤状态的逻辑移至ngAfterViewInit，这个钩子会在视图完全初始化后触发，此时@ViewChild获取到的Table实例已存在。

2. 确保@ViewChild正确定义 #

在组件类中明确声明对Table组件的引用：

修改后的Component.ts代码 #

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { Table, FilterMetadata } from 'primeng/table';
// 导入其他依赖（如FundingService、Router等）

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild('dt') dt: Table; // 声明Table组件引用

  constructor(private fundingService: FundingService, private router: Router) {}

  ngOnInit(): void {
    // 这里可执行其他初始化逻辑，不要操作Table实例
  }

  ngAfterViewInit(): void {
    const savedFilters = this.fundingService.getDataState();
    if (savedFilters && this.dt) {
      this.dt.filters = savedFilters;
      this.dt.filter(); // 手动触发过滤，确保表格立即应用新规则
    }
  }

  seeDetailedData(id: string) {
    const filters = this.dt.filters;
    // 深拷贝过滤状态，避免后续修改影响保存的快照
    const savedFilters = JSON.parse(JSON.stringify(filters));
    this.fundingService.setDataState(savedFilters);
    this.router.navigate(['test', id]);
  }
}

补充说明 #

• 如果你的Angular版本低于8，需要给@ViewChild添加{ static: false }配置：@ViewChild('dt', { static: false }) dt: Table;
• 调用this.dt.filter()是为了确保表格在赋值过滤规则后立即刷新，否则可能不会自动应用过滤效果
• 使用JSON.parse(JSON.stringify(filters))深拷贝过滤状态，避免后续Table过滤规则变化时，同步修改服务中保存的状态（因为对象是引用类型）

内容的提问来源于stack exchange，提问作者Илья Никитин