Question

我正在尝试使用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, 0, 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（按原样，但圆圈出现在其他位置）

有人可以向我解释为什么我在这里只使用一个数组，以及幕后发生的事情弄乱了吗？

谢谢！

角度* ng用于数组操作

0 个答案: