Angular/TypeScript自定义表格组件forEach未定义读取错误排查

• 直接触发Cannot read property 'forEach' of undefined的核心问题：AdminUiComponent中columns属性的写法错误。当前代码仅对columns做了类型标注，没有给属性赋初始值，组件初始化时该属性值为undefined，经输入绑定传到TableComponent后，ngOnInit中执行this.columns.forEach必然抛出未定义错误。
• 连带存在的逻辑缺陷：
  • TableComponent的ngOnChanges钩子逻辑错误：Angular的ngOnChanges接收的参数是SimpleChanges对象，键名为绑定的输入属性，当前代码写的if (old.data)实际是判断对象上是否存在名为old的属性，条件永远不成立，导致数据更新时根本不会初始化MatTableDataSource。
  • 空值引用风险：TableComponent的ngAfterViewInit直接给this.tableData.sort赋值，但tableData只有在ngOnChanges执行后才会被初始化，此前值为undefined，执行到该行同样会抛出空引用错误。

1. 修正AdminUiComponent中columns的定义逻辑，拆分类型标注与初始值赋值

// 先定义列配置的类型
type ColumnConfig = Array<Record<string, string>>;

export class AdminUiComponent implements OnInit {
  public users: any[] = [];
  resetUsers: any;
  @Input() header: string;  

  // 标注类型 + 补充初始值，避免传值为undefined
  @Input() columns: ColumnConfig = [
    { userName: "User Name" },
    { firstName: "First Name" },
    { lastName: "Last Name" },
    { email: "Email" },
    { roleId: "Role ID" },
    { statusId: "Status ID" },
  ];
  @Input() data: any[];  

  constructor(    
    private userService: UserService,    
  ) { }  
 
  ngOnInit(): void {   
    this.userService.getUsers().subscribe(data => {
      this.users = data.users;
    });
  }
}

2. 修正TableComponent的钩子逻辑，补充空值兜底避免运行时报错

export class TableComponent implements OnInit, OnChanges, AfterViewInit {
  @Input() header;
  // 给输入属性加默认空数组做兜底
  @Input() columns: any[] = [];
  @Input() data;

  columnKeyValuePairs = [];
  displayedColumns = [];
  tableData: MatTableDataSource<any>;

  @ViewChild(MatSort, { static: false }) sort: MatSort;
  expandedElement;

  ngOnInit(): void {
    // 校验columns为数组时再执行遍历
    if (!Array.isArray(this.columns)) return;
    this.columns.forEach((col) => {
      const pair = Object.entries(col);
      this.columnKeyValuePairs.push(pair[0]);
      this.displayedColumns.push(pair[0][0]);
    });
  }

  // 修正ngOnChanges的判断逻辑
  ngOnChanges(changes: SimpleChanges) {
    // 监听data输入值的变化
    if (changes['data']?.currentValue) {
      this.tableData = new MatTableDataSource<any>(changes['data'].currentValue);
      // 初始化数据源后，如果sort实例已存在，直接绑定解决时序问题
      if (this.sort) {
        this.tableData.sort = this.sort;
      }
    }
  }

  ngAfterViewInit() {
    // 空值判断避免tableData未初始化时报错
    if (this.tableData && this.sort) {
      this.tableData.sort = this.sort;
    }
  }
}

3. 修正模板绑定的格式规范

<div class="admin">
    <app-table 
      [header]="header"
      [data]="users"
      [columns]="columns">
    </app-table>
</div>

• 组件初始化阶段不再触发forEach of undefined报错
• 用户接口返回数据后，表格可根据列配置正常渲染表头与对应数据
• 表格排序功能不会出现空引用报错

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