Angular7遍历表格时遇TS2339错误：HTMLElement无rows属性

这个问题我之前在Angular项目里也踩过坑，本质是TypeScript的严格类型校验在“搞事情”——咱们先拆解下错误原因，再给你两种靠谱的解决办法：

错误原因 #

document.getElementById()返回的是通用的HTMLElement类型，而rows是HTMLTableElement独有的属性，TypeScript不认通用元素上的表格专属属性，所以就抛出了TS2339错误。

解决方案 #

方案一：类型断言+空值判断（快速修复） #

直接把获取到的DOM元素断言成表格类型，同时加上空判断避免运行时找不到元素的问题：

// 先断言类型，再加空判断防止null报错
const table = document.getElementById("CompareParts") as HTMLTableElement;
if (table) {
  for (let i = 1, row; row = table.rows[i]; i++) {
    for (let j = 0, col; col = row.cells[j]; j++) {
      const cell = table.rows[i].cells;
      this.ACells.push(cell);
    }
  }
  this.length = this.ACells.length;
  for (let x = 0; x < this.ACells.length; x++) {
    this.ARows.push(this.ACells[x]);
  }
}

方案二：用Angular的ViewChild（更符合框架规范） #

Angular不推荐直接用原生DOM操作，咱们可以用ViewChild来获取表格元素，更贴合Angular的组件化思路：

1. 在模板里给表格加模板引用变量：

<table #CompareParts>
  <!-- 表格内容 -->
</table>

2. 在组件类里通过ViewChild获取元素：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 组件元数据（保留你原有的配置即可）
})
export class PartCompareComponent implements AfterViewInit {
  @ViewChild('CompareParts') tableRef!: ElementRef<HTMLTableElement>;
  ACells: any[] = [];
  ARows: any[] = [];
  length: number = 0;

  ngAfterViewInit() {
    // 确保视图初始化后再操作DOM
    const table = this.tableRef.nativeElement;
    for (let i = 1, row; row = table.rows[i]; i++) {
      for (let j = 0, col; col = row.cells[j]; j++) {
        const cell = table.rows[i].cells;
        this.ACells.push(cell);
      }
    }
    this.length = this.ACells.length;
    for (let x = 0; x < this.ACells.length; x++) {
      this.ARows.push(this.ACells[x]);
    }
  }
}

小提示 #

如果可以的话，尽量用方案二——直接操作原生DOM在Angular里属于“野路子”，用框架提供的API不仅更安全，后续维护也更方便～

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