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

<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,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.但我仍然得到错误的元素