什麼導致頁面刷新與此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）單擊「添加你好」（不是實際測試的一部分）
2）點擊「少Cabron」和頁面會刷新。
2）單擊「More Cabron」或「Less Cabron ALT」，頁面不會刷新（儘管表格已更改，與「Less Cabron」非常相似）。

我想給在表單中添加/刪除/ moveup/movingown字段的可能性。

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

---

從documentation for Button

提示：一定要規範ify元素的類型屬性。不同的瀏覽器對元素使用不同的默認類型。

因此，如果您未能設置按鈕的類型，按鈕會發生什麼變化取決於瀏覽器，因此您在此時可能會失敗。

---

（從評論） ...拼接（1,1）始終觸發頁面刷新。拼接（anotherElement，1）從來不會，我們應該把這個作爲「魔角」？...

這是因爲這些按鈕是嵌套在形式和類型沒有定義您所使用的默認瀏覽器類型爲submit，這會導致表單回傳。您擁有的初始按鈕（不會導致回發）不在表單中，因此瀏覽器不會將其視爲提交按鈕。