Angular表格ngOnChanges中给this.table.data赋值触发undefined错误如何解决？

问题根因 #

Angular生命周期钩子的执行顺序为 ngOnChanges → ngOnInit，代码中的this.table实例是在ngOnInit调用的initTableMultiSort方法中才完成初始化的。当父组件首次传递tableData参数时，会先触发ngOnChanges，此时this.table还处于未赋值的undefined状态，因此执行this.table.data = this.tableData时就会抛出对应的类型错误。

解决方案 #

方案1：在ngOnChanges中增加非空判断（最简便） #

修改ngOnChanges的逻辑，只有当this.table已经初始化完成后才给this.table.data赋值，代码如下：

ngOnChanges(changes: SimpleChanges): void {
  if(changes?.tableData?.currentValue && this.table) {
    this.tableData = changes.tableData.currentValue
    this.table.data = this.tableData;
  }
}

该方案兼容后续tableData更新的场景，首次初始化时ngOnChanges不执行赋值逻辑，后续ngOnInit中的initTableMultiSort方法会调用getData自动完成首次的table.data赋值。

方案2：把table初始化逻辑提前到constructor中 #

如果tableOptions参数是父组件同步传递的静态配置，不需要等待异步赋值，可以把initTableMultiSort的执行逻辑从ngOnInit移到constructor中，确保this.table在ngOnChanges触发前就完成初始化。

方案3：声明table属性时直接初始化（不推荐） #

可以在声明table属性时直接赋值一个空的TableData实例，避免undefined问题：

table:TableData<any> = new TableData([],[]);

该方案可能会导致首次赋值的配置和后续传入的tableOptions不一致，除非确认配置不会变更否则不推荐使用。

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