gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:58:43 25 4
gpt4 key购买 nike

为了学习 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。但是我还是得到了错误的元素

最佳答案

如果您想访问调度事件的元素,您应该使用 $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 没有指向预期的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47970366/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com