Angular表格初始化报错修复后排序失效问题求助

问题根源 #

你为了规避TypeScript的初始化报错，手动给sort赋值new MatSort()、给paginator赋空对象，这会覆盖@ViewChild原本要获取的模板中真实的组件实例，导致表格绑定的是你创建的空实例，而非页面上的排序组件，因此排序功能失效。

正确解决方案 #

方案1：使用非空断言操作符（推荐） #

直接给属性添加!，告诉TypeScript该属性会在组件视图初始化后被赋值，无需在构造器中初始化：

@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;

方案2：在生命周期钩子中正确绑定实例 #

确保在ngAfterViewInit钩子中（视图初始化完成后），将获取到的真实实例绑定到数据源：

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourTableComponent implements AfterViewInit {
  dataSource = new MatTableDataSource();
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

方案3：关闭严格初始化检查（不推荐） #

如果不想逐个处理属性，可以在tsconfig.json中关闭strictPropertyInitialization检查，但这会降低代码的健壮性：

{
  "compilerOptions": {
    "strictPropertyInitialization": false
  }
}

关键注意事项 #

• 不要手动创建MatSort或MatPaginator实例，@ViewChild会自动获取模板中对应选择器的组件实例
• 必须在ngAfterViewInit中绑定实例，因为@ViewChild的实例只有在视图初始化完成后才会被赋值

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