Angular:event.srcElement 没有指向预期的元素

Question

为了学习 Angular 的基础知识，我决定编写一个小数独游戏。 这里是动态构建数独网格的 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) 将获得一个“错误单元格”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 时，我总是得到错误的元素。 例如:当我点击单元格 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);
}