Angular中能否在ngIf内定义MatPaginator？实例为何始终为undefined？

这个场景完全可行，你遇到的paginator始终为undefined的问题，核心原因是组件初始化时，MatPaginator所在的模板还未被渲染，导致@ViewChild无法找到对应的实例。

问题分析 #

你的MatPaginator位于#dokumendiLisamineContainer这个ng-template中，而这个模板只有在showDokumendiLisaDokiNupp为false时才会被激活渲染。组件的ngAfterViewInit生命周期钩子执行时，该模板还未加载，因此@ViewChild无法获取到MatPaginator实例，返回undefined。

解决方案 #

按以下步骤修改代码即可解决：

1. 给MatPaginator添加模板引用变量
   修改分页器的HTML代码，添加明确的模板引用（比如#paginator），让@ViewChild可以精准定位：

   <mat-paginator #paginator
                 [pageSizeOptions]="pageSizeOptions"
                 [pageSize]="defaultPageSize"
                 (page)="onPageChange($event)">
   </mat-paginator>
   

2. 配置@ViewChild的静态查询选项
   在TS文件中修改@ViewChild声明，确保static设为false（Angular 8+默认是false，但显式声明更清晰），这样Angular会在视图变更后再查找元素：

   @ViewChild('paginator', { static: false }) paginator: MatPaginator;
   

3. 在模板渲染完成后获取实例
   点击按钮切换显示状态后，需要等待Angular完成视图更新，才能拿到有效的paginator实例，有两种实现方式：

   • 方式一：使用setTimeout等待视图更新
     在openDokumendiLisamine方法中添加延迟：

     openDokumendiLisamine() {
       this.showDokumendiLisaDokiNupp = false;
       // 等待Angular完成视图渲染
       setTimeout(() => {
         if (this.paginator) {
           // 将paginator绑定到数据源，比如：
           // this.dataSource.paginator = this.paginator;
         }
       });
     }
     

   • 方式二：使用ChangeDetectorRef强制触发变更检测
     注入ChangeDetectorRef手动触发视图更新，可立即获取实例：

     import { ChangeDetectorRef } from '@angular/core';
     
     constructor(private cdr: ChangeDetectorRef) {}
     
     openDokumendiLisamine() {
       this.showDokumendiLisaDokiNupp = false;
       // 强制触发变更检测，更新视图
       this.cdr.detectChanges();
       if (this.paginator) {
         // 绑定数据源到paginator
         // this.dataSource.paginator = this.paginator;
       }
     }
     

补充说明 #

如果你的表格使用MatTableDataSource，务必在获取到paginator实例后，再将其赋值给数据源的paginator属性，这样分页功能才能正常工作。

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