What is the reason that my game board element can not be displayed in my html file?

Question

I have a loop in my Angular html file:

    <div class="board" #board>
              <div class="row" *ngFor="let row of this.board; let i = index">
                <div *ngFor="let box of row; let j = index" id="columns">
                  <div
                    class="cell"
                    [style.backgroundColor]="box.color"
                    #cell
                    (mouseleave)="resetElement(cell)"
                    (mouseover)="
                      hoveredElement(
                        cell.getBoundingClientRect(),
                        'cell',
                        j,
                        i,
                        cell
                      )
                    "
                    (click)="deployShip(j, i)"
                  ></div>
                </div>
              </div>
            </div>

And in my ts file there is declared object board as follows:

    export class GameDeployShips implements OnInit {
      public board: BoardCell[][];
    
      constructor(
        private auth: AuthService,
        private signalRService: SignalRService,
        private game: GameService
      ) {
        this.board = this.getEmptyBoard();
      }
    
    public getEmptyBoard(): BoardCell[][] {
        let board: BoardCell[][] = [];
        for (let i = 0; i < 10; i++) {
          board[i] = [];
          for (let j = 0; j < 10; j++) {
            board[i][j] = {
              row: j,
              col: i,
              value: 0,
              color: 'rgba(0, 162, 255, 0.2)',
            } as BoardCell;
          }
        }
    
        return board;
      }

The problem is, that when running my Angular application I am getting an console error:

ERROR Error: Cannot find a differ supporting object '[object HTMLDivElement]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Angular 26
    RxJS 5
    Angular 19
    RxJS 18
    ngOnInit game-play.component.ts:54
    Angular 22
    RxJS 5
    Angular 19
    RxJS 14
core.js:4610
    Angular 15
    RxJS 5
    Angular 19
    RxJS 18
    ngOnInit game-play.component.ts:54
    Angular 22
    RxJS 5
    Angular 19
    RxJS 17
    Angular 5

The funny thing is, that in my spike/trial application the same syntax works fine. Things I already tried:

• in html file using this.board without this keyword,

• in html file complete removing of <div class="board" #board> gived no errors in console,

• in html file replacing this.board with getEmptyBoard(): <div class="row" *ngFor="let row of this.board; let i = index"> draws the board, but it is not the way I wanted to do it,

• changing div to ng-template:

  <ng-template class="row" *ngFor="let row of this.board; let i = index"> <ng-template *ngFor="let box of row; let j = index" id="columns">

• changing board and getEmptyBoard() types to any

I try to figure out this already a few hours. I will appreciate any help and clues with this.

Answer 1

I found it :)))

I don't know why angular don't like board name. just rename it to _board or something else

See Stackblitz: https://stackblitz.com/edit/angular-ivy-qdw5fm

Answer 2

<div class="board" #board> creates a reference called board using the # operator. The varialbe used in the ngFor is then referencing the div and not the value of the component. Renaming one of both will solve the issue.