我正处于创建蛇的第一步，需要： 1-创建游戏板 2-创造蛇和水果 3-展示蛇和水果o 问题是，蛇和水果生成后，棋盘会更新，但它们不会显示在游戏棋盘中 注：单元格中0表示空，1表示是蛇体，2表示是水果
html -> 游戏板组件：
<div class="gameB">
<div *ngFor="let i of board" class="row">
<div *ngFor="let j of i" class="cell"
[ngClass]="{'snake' : board[board.indexOf(i)][j] === 1, 'fruit': board[board.indexOf(i)][j] === 2}">
{{ board[board.indexOf(i)][j] }}
</div>
</div>
</div>
TS -> 游戏板组件：
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { NgModule } from '@angular/core';
import { Snake } from '../snake-iterface';
@Component({
selector: 'app-game-board',
standalone: true,
imports: [CommonModule],
templateUrl: './game-board.component.html',
styleUrl: './game-board.component.css'
})
export class GameBoardComponent implements OnInit{
boardWidth:number = 20;
boardHeight:number = 20;
board:number[][] = [];
snake:Snake = {} as Snake;
fruit:number[] = [1,1];
createBoard(){
let temp:number[];
for(let i = 0; i < this.boardHeight;i++){
temp =[]
for(let j = 0; j < this.boardWidth;j++){
temp.push(0)
}
this.board.push(temp)
}
}
spawnSnake():void{
this.board[this.snake.headPositionY][this.snake.headPositionX] = 1;
}
updateBoard():void{
for(let i = 0; i < this.boardHeight; i++){
for(let j = 0; j < this.boardWidth;j++){
if(this.snake.bodyPositions.includes([j, i]) ){
this.board[i][j] = 1;
}else if((j === this.fruit[0] && i == this.fruit[1])){
this.board[i][j] = 2;
}
}
}
}
ngOnInit(): void {
this.createBoard()
console.log("Before Snake creation", this.board)
this.snake = {
headPositionX: Math.floor(this.boardWidth / 2),
headPositionY: Math.floor(this.boardHeight / 2),
bodyPositions: [[Math.floor(this.boardWidth / 2), Math.floor(this.boardHeight / 2)]],
length: 1,
direction: 'right'
};
console.log("Before Spawn", this.board)
this.spawnSnake()
this.updateBoard()
console.log("After Update 1", this.board)
setTimeout(this.updateBoard, 1000)
console.log("After Update 2", this.board)
}
}
CSS -> 游戏板组件：
.gameB{
margin: auto;
padding:10px;
display: flex;
flex-direction: column;
gap: 3px;
background-color: black;
width:fit-content;
}
.row{
display: flex;
flex-direction: row;
gap: 3px;
}
.cell{
width:20px;
height:20px;
background-color: grey;
}
.snake{
background-color:red;
}
.fruit{
background-color:purple;
}
其他文件：
HTML -> 应用程序组件：
<app-game-board></app-game-board>
HTML -> 索引.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SnakeGame</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
注意： 第一个控制台日志显示蛇和水果在更新之前和创建蛇之前添加到板上（如何？？？？？？） 第二个控制台和所有其他日志显示相同的结果
注意：使用 Angular 17
请准确回答，因为我是 Angular 的初学者
我尝试将蛇声明从 ngOnInit 的外部更改为内部，但它仍然不起作用
在
game-board.component.htmljj那么你只需要做到这一点
<div class="gameB">
<div *ngFor="let i of board" class="row">
<div
*ngFor="let j of i"
class="cell"
[ngClass]="{'snake' : j === 1, 'fruit': j === 2}"
>
{{j}}
</div>
</div>
</div>