带有按钮单击事件的奇怪Angular 2行为

Question

I have two very simple methods in my .ts file:

editLocation(index) {}

deleteLocation(index) { 
    this.locations.splice(index, 1); 
}

html counterpart calls these method when buttons are clicked:

<button (click)="editLocation(i)" class="btn btn-xs btn-success">Edit</button>
<button (click)="deleteLocation(i)" class="btn btn-xs btn-danger">Delete</button>

"Delete" button works fine, quickly deletes what I need and shows updated list of "locations". Now, with "Edit" button I wanted to implement a different behavior. But, whatever I put in this method, after the code is executed, it thinks for a bit and redirects to a previous page. I deleted everything from the edit method (it is now empty as you can see above) and it still redirects to a previous page. However, if I add this.locations.splice(index, 1); to the "edit" method it behaves just like "delete" method and does not redirect anywhere. What can be wrong? Thanks a lot in advance!

Answer 1

您可以向其中添加type =“ button”，以确保该按钮不充当提交或其他事件：

<button type="button" (click)="editLocation(i)" class="btn btn-xs btn-success">Edit</button>