Arrays 泄漏点击事件

我遇到的问题与angular中的点击事件有关。 我的应用程序是一个井字游戏应用程序。 我的应用程序使用有角度的材质。 问题：当用户单击电路板上的按钮时，单击事件似乎正在泄漏到电路板上附近的按钮中。下面的图像演示了我所说的内容。 . 如您所见，列1第2行中的按钮被激活，即使该按钮未被单击。下面是我的应用程序的闪电战。

如果我能在这个问题上得到一些帮助就太好了。谢谢

真是个好问题=）

所以问题似乎是，mat按钮以某种方式响应文本光标位置的变化

如果您这样更改square.component.html：

{{value}

并将square.component.scs更改为：

.grid按钮{
宽度：100%；
身高：100%；
背景色：rgb（9115891）；
字体大小：10rem；
边界半径：4px；
文本对齐：居中；
填充：50px；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
光标：指针；
用户选择：无；
}
.grid按钮：悬停{
背景颜色：绿色；
}

当您现在单击一个“按钮”时，您可以清楚地看到，光标跳到下一个字段。但是一个简单的

div

似乎不会对

：hover

做出反应

您还可以向上述CSS添加

用户选择：无

到

.grid按钮

不显示光标，或者一个普通按钮（非材质）也可以工作

长话短说：如果您改变了材质组件的大部分外观，我建议您不要使用它，因为它可能会产生副作用。

问题已解决

---

这是Vimal Patel在评论中发表的评论。

为什么只为按钮声明方形组件？删除该组件并直接绑定应用程序组件中的按钮。无特殊原因。我是个新手，所以我正在测试。我尝试了您的建议，将按钮直接放在app.Component.html中，但问题仍然存在。您可以使用stackblitz或codesandbox重现该问题吗？嘿，Vimal，我添加了一个指向stackblitz的链接，该链接显示了该应用。github中似乎记录了相同的问题。根据post而不是值数组使用对象数组