Question

要学习Angular的基础知识我决定写一个小数独游戏。这里是动态构建Sudoku网格的html：

<div
*ngIf="(this.sudokuGenerated && !this.sudokuSolved) || this.isEmptySudoku">
<table id="grid" style="border-collapse: collapse;">
    <tr class="grid-row" *ngFor="let row of this.displaySudoku.workingCopy; index as i;">
        <td #sudokucell class="grid-cell" *ngFor="let cell of row; index as j;" (click)="this.setNumberInCell(i, j, $event)">
            <span class="empty-cell" *ngIf="this.displaySudoku.workingCopy[i][j] == 0"> </span>
            <span class="empty-cell" *ngIf="this.displaySudoku.workingCopy[i][j] != 0 && this.displaySudoku.grid[i][j] == 0">{{cell}}</span> 
            <span class="given-cell" *ngIf="this.displaySudoku.workingCopy[i][j] != 0 && this.displaySudoku.grid[i][j] != 0">{{cell}}</span>
        </td>
    </tr>
</table>

如您所见，每个td都有一个点击事件。单击时，将调用以下方法。在该方法中，先前选择的数字被写入所选择的单元格（td）。插入号码后，将根据数独解决方案检查号码。如果错了，单元格（td）会得到一个错误的单元格＃34;将background-color更改为红色的css类：

setNumberInCell(row: number, col: number, event: Event): void {
if (this.selectedNumber != null && !this.sudokuSolved && this.displaySudoku.grid[row][col] == 0) {
  this.displaySudoku.workingCopy[row][col] = this.selectedNumber;
  this.checkAndRenderErrorCell(row, col, this.selectedNumber, event.srcElement);
}

}

checkAndRenderErrorCell(row: number, col: number, nr: number, element: Element): void {
if (this.checkMode && element != undefined) {
  if (this.displaySudoku.workingCopy[row][col] != this.displaySudoku.solution[row][col]) {
    console.log(element);
    this.renderer.addClass(element, 'error-cell');
    this.renderer.removeClass(element, 'selected-cell');
  }
}

}

我的问题是，当我点击一个单元格并从事件中获取srcElement时，我总是得到错误的元素。例如：当我单击Cell 0（第0行和第0列）时，我总是得到带有行索引0和单元索引1的td-Element。因此，当我将错误的数字放入该单元格时，总是使用td-Element旁边点击一个得到红色背景颜色。我尝试了很多，但不知道我犯了哪些错误。

非常感谢你的帮助！

*更新*我也尝试了event.target和event.currenTarget。但我仍然得到错误的元素

Answer 1

如果要访问调度事件的元素，则应使用$event.target属性。

setNumberInCell(row: number, col: number, event: Event): void {
if (this.selectedNumber != null && !this.sudokuSolved && this.displaySudoku.grid[row][col] == 0) {
  this.displaySudoku.workingCopy[row][col] = this.selectedNumber;
  this.checkAndRenderErrorCell(row, col, this.selectedNumber, event.target);
}

Angular：event.srcElement没有指向期望的元素

1 个答案: