0

我的 Angularhtml文件中有一个循环：

    <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 错误：找不到类型为“object”的不同支持对象“[object HTMLDivElement]”。NgFor 仅支持绑定到 Iterables，例如 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

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

  • 在不使用关键字的html文件中，this.boardthis

  • 在html文件中完全删除<div class="board" #board>控制台中没有错误，

  • 在html文件中替换this.board为getEmptyBoard()：<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

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

4

2 回答 2

2

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

于 2020-11-30T19:03:26.457 回答
1

我找到了 ：）））

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

参见 Stackblitz：https ://stackblitz.com/edit/angular-ivy-qdw5fm

于 2020-11-30T18:20:05.903 回答