如何解决角度* ng用于数组操作
我正在尝试使用Angular编写一个简单的井字游戏。我已经创建了名为@SpringBootApplication
// ... (other pre-existing annotations) ...
@EnableFeignClients // <------- THE IMPORTANT ONE
public class Application {
的2d 3x3数组,每个单元格中均带有'empty'值。我用* ngFor遍历它,以生成游戏所需的9个values
元素。
当我尝试使用新值更新div
数组的单元格时,例如“ circle”,结果表明我的函数-在单击values
之后触发-无法更改div
的CSS并将画布元素正确嵌入其中。有时(单击)后没有任何反应,有时CSS规则和画布被附加到另一个div
上,而不是预定的一个(屏幕快照2)。
当我不更新数组div
并保留所有'empty'值时,一切似乎都可以正常工作(它仅用于生成9 values
元素),然后使用其他数组div
来存储数据。 values2
的样式和画布将应用于正确的background
。
.ts文件:
div
.html文件:
values: string[][] = [...Array(3)].map(e => Array(3).fill('empty'));
values2 = [...Array(3)].map(e => Array(3).fill('empty'));
cellClicked(mydiv) {
mydiv.style.background = '#3a6fa5';
this.loadCanvas(mydiv);
}
loadCanvas(mydiv) {
const canvas = document.createElement('canvas');
canvas.width = 222;
canvas.height = 222;
mydiv.appendChild(canvas);
canvas.getContext('2d').linewidth = 20;
canvas.getContext('2d').beginPath();
if (this.ifCircle !== true ) { canvas.getContext('2d').arc(111,111,100,2 * Math.PI);
canvas.getContext('2d').stroke();
} else {
canvas.getContext('2d').lineCap = 'round';
canvas.getContext('2d').moveto(10,10);
canvas.getContext('2d').lineto(212,212);
canvas.getContext('2d').moveto(212,10);
canvas.getContext('2d').lineto(10,212);
canvas.getContext('2d').stroke();
}
mydiv.style.pointerEvents = 'none';
}
addToMatrix(i,j) {
if (this.ifCircle === true) { this.values2[i][j] = 'circle';
this.ifCircle = false; } else {
this.values2[i][j] = 'cross';
this.ifCircle = true;
}
}
屏幕截图(我总是单击左上角的正方形):
when the second array is used to store data
when the first array is updated(按原样,但圆圈出现在其他位置)
有人可以向我解释为什么我在这里只使用一个数组,以及幕后发生的事情弄乱了吗?
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。