要学习Angular的基础知识,我决定写一个小数独游戏.
这里是动态构建Sudoku网格的html：
这里是动态构建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)将获得一个“错误单元格”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.但我仍然得到错误的元素
解决方法
如果要访问调度事件的元素,则应使用$event.target属性.
setNumberInCell(row: number,event.target); }
