Question

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

鉴于这个笨重，我重新创造了我的问题：
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或者）单击“更多Cabron”或“更少Cabron ALT”，页面将不会刷新（尽管表单被更改并且与“Less Cabron”非常相似）。

我试图在表单中添加/删除/ moveup / movedown字段。

我可以用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>

这样做可以解决问题。

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

<强> HTML

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

<强>代码

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

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

因此，如果您未能设置按钮的类型，按钮会发生什么情况取决于浏览器，您将在此时将其留给机会。

（来自评论） ... splice（i，1）始终触发页面刷新。 splice（anotherElement，1）永远不会，我们应该把它留作“Angular magic”吗？...

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