我的 html 文件中无法显示我的游戏板元素是什么原因？

Question

我的 Angular html 文件中有一个循环：

    <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>

在我的 ts 文件中声明对象 board 如下：

    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;
      }

问题是，当运行我的 Angular 应用程序出现控制台错误时：

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

有趣的是，在我的 spike/trial 应用程序中，相同的语法工作正常。我已经尝试过的事情：

在 html 文件中使用 this.board 没有 this 关键字，
在 html 文件中完成删除 <div class="board" #board>，在控制台中没有错误，
在 html 文件中用 getEmptyBoard() 替换 this.board： <div class="row" *ngFor="let row of this.board; let i = index"> 画板，但这不是我想要的方式,
将 div 更改为 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">
将 board 和 getEmptyBoard() 类型更改为 any

我试着弄清楚这个已经几个小时了。我将不胜感激任何帮助和线索。

Answer 1

我找到了:)))

我不知道为什么 angular 不喜欢 board 这个名字。只需将其重命名为 _board 或其他名称

查看 Stackblitz：https://stackblitz.com/edit/angular-ivy-qdw5fm

Answer 2

<div class="board" #board> 使用 # 运算符创建一个名为 board 的引用。 ngFor 中使用的 varialbe 引用 div 而不是组件的值。重命名两者之一将解决问题。

我的 html 文件中无法显示我的游戏板元素是什么原因？

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

angular

ngfor

angular11