是什么导致使用此 splice() 刷新页面？

Question

我不知道如何更好地表达标题，因为我显然没有完全理解正在发生的事情。

鉴于我重新创建了我的问题的这个 plunkr：
http://plnkr.co/edit/vaj5peVpteYQx4iZd3pw?p=preview

this.items.splice(i, 1); -> refresh  
this.items.splice(i - 1, 1); -> or any other i (not the target of the method) no refresh

有人可以向我解释原因：
添加 Cabron 很好。
使用 removeALT 方法移除 Cabron 很好。
但是使用默认的移除 Cabron 按钮移除相同的 Cabron 会强制刷新页面？

复制：
1）点击“添加Hello”（实际上不是测试的一部分）
2) 点击“Less Cabron”，页面会刷新。
2 OR) 单击“More Cabron”或“Less Cabron ALT”，页面不会刷新（尽管表单已更改并且与“Less Cabron”非常相似）。

我正在尝试提供在表单中添加/删除/上移/下移字段的可能性。

我可以用 css 做一些奇怪的事情，并且总是使用“i +/- x”，但我更愿意了解如何避免这种情况。
同样在我的应用程序（在外部窗口 [window.open()] 上运行）窗口的 url 会随着作为 URL 参数传递的拼接对象的参数而变化（不知道为什么）。

example: [starting url, after here is all inserted from that bug]?title=Cabron

Answer 1

您应该将type="button" 添加到您的按钮中，这样它们就不会呈现为submit 按钮。如果type="submit" 可能会触发页面回发到服务器。

例子

<button type="button" (click)="add(i)">More Cabron</button>

这样做可以解决问题。

---

或者，您可以将事件 args 传递给按钮单击处理程序并在该事件 arg 上调用 preventDefault()。

HTML

<button (click)="add(i,$event)">More Cabron</button>

代码

add(i,$event) {
  $event.preventDefault();
  // rest of code

---

来自documentation for Button

提示：始终指定元素的类型属性。不同的浏览器对元素使用不同的默认类型。

因此，如果您未能设置按钮的类型，那么按钮会发生什么取决于浏览器，此时您就只能靠运气了。

---

（来自评论） ...splice(i, 1) 总是触发页面刷新。 splice(anotherElement,1) 永远不会，我们应该将其保留为“Angular magic”吗？...

这是因为这些按钮嵌套在表单中，并且由于未定义类型，您使用的浏览器默认类型为submit，这会导致表单回发。您拥有的初始按钮（不会导致回发）不在表单中，因此浏览器不会将其视为提交按钮。