Property 'rows' does not exist on type 'HTMLElement' error TS2339

Question

User696604810 posted

I work on angular 7
when loop to table html and compile i get error

95% emitting CopyPlugin
ERROR in src/app/Pages/part-compare/part-compare.component.ts(25,38): error TS2339: Property 'rows' does not exist on type 'HTMLElement'.
src/app/Pages/part-compare/part-compare.component.ts(27,26): error TS2339:
Property 'rows' does not exist on type 'HTMLElement'.

How to solve this error please ?

What I have tried:

var table = document.getElementById("CompareParts");
    for (var i = 1, row; row = table.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
        var Cell = table.rows[i].cells
        this.ACells.push(Cell);
      }
    }
    this.length=this.ACells.length
    for (var x = 0; x < this.ACells.length; x++) {
      this.ARows.push(this.ACells[x]);

Answer 1

User-474980206 posted

Typescript is a typed language. You need to cast the variable table to be a table element. See typings. I don’t use typescript, so this is not an issue for me,  but would guess it’s type is  HTMLTableElement. 

Answer 2

User-719153870 posted

Hi ahmedbarbary,

error TS2339: Property 'rows' does not exist on type 'HTMLElement'.

Typescript is typesafe which means the var table = document.getElementById("CompareParts"); returns the type HTMLElement which does not contain a rows property.

You have to cast  the result of getElementById() to HTMLTableElement (most likely HTMLTableElement , not tested, if this can not work, please try cast to other type element.) like below:

var table = (<HTMLTableElement >document.getElementById("CompareParts"));

For this solution, you can refer to The property 'value' does not exist on value of type 'HTMLElement'.

As for the HTMLTableElement, you can check this doc and other type elememts can be found on the left side of this doc "Related pages for HTML DOM".

Best Regard,

Yang Shen