问题描述
我正在尝试使用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 (将#修改为@）