Angular报错Property 'ELEMENT_DATA' is used before its initialization如何解决？

报错原因 #

该报错为TypeScript严格属性初始化检查触发的编译错误，常见于Angular项目开启strictPropertyInitialization配置的场景，核心问题是ELEMENT_DATA属性在完成赋值前就被调用。

可行解决方案 #

• 方案1：调整声明赋值顺序，保证先初始化再调用
  多数情况是初始化表格数据源dataSource时，把dataSource的声明赋值放在了ELEMENT_DATA前面，调整二者顺序即可：

export class YourTableComponent {
  // 先完成ELEMENT_DATA的初始化
  ELEMENT_DATA = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    // 其余的表格数据项
  ];
  // 再调用已初始化的ELEMENT_DATA生成数据源
  dataSource = new MatTableDataSource(this.ELEMENT_DATA);
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
}

• 方案2：使用非空断言标记（确定你会在属性被使用前完成赋值时使用）
  如果你的ELEMENT_DATA是在ngOnInit、构造函数等生命周期中异步/同步赋值，可以在声明时添加!非空断言，告知TypeScript该属性一定会被赋值，无需做初始化检查：

export class YourTableComponent {
  // 非空断言标记
  ELEMENT_DATA!: any[];
  dataSource!: MatTableDataSource<any>;

  ngOnInit() {
    // 先赋值ELEMENT_DATA
    this.ELEMENT_DATA = getYourDataFromAPI();
    // 再调用生成数据源
    this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
  }
}

• 方案3：设置为可选属性加空判断（适合ELEMENT_DATA可能为空的场景）

export class YourTableComponent {
  ELEMENT_DATA?: any[];
  dataSource?: MatTableDataSource<any>;

  ngOnInit() {
    this.ELEMENT_DATA = getYourDataFromAPI();
    if (this.ELEMENT_DATA) {
      this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
    }
  }
}

• 方案4：临时关闭严格初始化检查（不推荐，仅作为应急手段）
  修改项目根目录的tsconfig.json配置：

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

你提供的错误截图参考：
#

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