각도 : event.srcElement를 내가 조금 스도쿠 게임을 쓰기로했다 각도의 기초를 배울 수있는 기대 요소

Question

에 가리 키지 않습니다. 다음은이 동적으로의 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)에 기록됩니다. 숫자를 삽입 한 후 수두 쿠 솔루션에 대한 숫자가 확인됩니다. ,

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'); 
    } 
} 

}

내 문제가 : 잘못된 경우, 셀 (TD)는 빨간색 배경 색상을 변경하려면 "잘못된 셀"CSS 클래스를 가져옵니다 내가 셀을 클릭하고 srcElement가 이벤트에서 가져 오면 항상 잘못된 요소를 가져옵니다. 예를 들어 : 나는 셀 0 (행 0 열 0)을 클릭하면 내가 그 셀에 잘못된 번호를 넣을 때 항상 행 인덱스 0 및 따라서 세포 인덱스 1로 TD-요소를 얻을, 항상 TD- 클릭 한 옆의 요소는 빨간색 배경색을 가져옵니다. 내가 많이했지만, 내가 실수를 단서가 없다.

도움을 주셔서 감사합니다.

는 * 업데이트 * 또한 event.target 및 event.currenTarget을 시도했다. 당신이 $event.target 속성을 사용해야하는 이벤트를 전달 요소에 액세스하려면하지만 난 여전히 잘못된 요소를

Answer 1

를 얻을. 답변에 대한

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); 
}