Angular升级后HTML调用ViewChild属性报undefined如何解决

问题原因 #

• @ViewChild 装饰器查询的组件/元素实例，默认会在 ngAfterViewInit 生命周期钩子执行时才完成赋值，组件首次渲染模板阶段，该属性还未被赋值，值为 undefined
• 旧版本项目未开启严格模板检查（strictTemplates: true），首次渲染时访问 undefined 属性不会直接抛错，等实例赋值完成后表达式即可正常计算；新版本 Angular 开启严格模式后，首次渲染检测到 undefined 属性访问会直接抛出运行时错误
• 你添加的非空断言运算符 ! 仅能骗过 TypeScript 类型检查，不会改变代码实际运行时的赋值时序，因此无法解决运行时 undefined 的问题

修复方案 #

可任选以下一种方案修复，优先推荐第一种，适配性最好：

方案1：模板中使用可选链+默认值（最稳妥） #

直接修改模板中计算序号的表达式，在访问 paginator 属性时加可选链运算符，同时给初始未赋值阶段设置默认值，匹配你配置的默认分页参数：

<td mat-cell *matCellDef="let i = index"> 
  {{i + 1 + (paginator?.pageSize ?? 10) * (paginator?.pageIndex ?? 0)}}
</td>

说明：?? 是空值合并运算符，当左侧值为 null/undefined 时取右侧默认值，你这里默认分页大小是10，默认页码是0，和mat-paginator上配置的[pageSize]="10"初始值一致，不会出现序号计算错误。

方案2：给 ViewChild 属性设置初始默认值 #

在组件类中给 paginator 属性设置初始默认值，覆盖首次渲染时的 undefined 状态，等 ViewChild 查询到真实实例后会自动替换为真实的 MatPaginator 对象：

@ViewChild(MatPaginator) paginator: MatPaginator = {
  pageSize: 10,
  pageIndex: 0
} as MatPaginator;

这种写法不需要修改模板代码，序号计算逻辑可以保持原来的写法不变。

方案3：设置 static 查询参数（仅适用于分页器无动态显示隐藏的场景） #

如果你的 mat-paginator 没有被 *ngIf、*ngFor 等结构指令包裹（从你贴的模板代码看符合这个条件），可以给 @ViewChild 配置 static: true，让查询结果在 ngOnInit 阶段就完成赋值，早于模板首次渲染：

@ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;

注意：如果后续业务调整给分页器加了*ngIf控制显隐，这个配置会导致动态显示后的分页器实例无法被正确查询，会出现分页状态不更新的问题，这种场景不要用这个方案。

额外注意 #

如果你用的是 Angular Material 提供的 MatTableDataSource 作为表格数据源，记得在 ngAfterViewInit 生命周期中把分页器实例绑定到数据源上，否则分页功能不会生效：

ngAfterViewInit(): void {
  this.dailyRecordSkeletrons.paginator = this.paginator;
}

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