Angular中点击按钮时如何阻止页面重载？

你的问题根源在于：放在<form>标签内的<button>默认是submit类型，点击时会触发表单提交，进而导致页面重载。以下是几种简单的解决办法：

方法一：给按钮添加type="button"属性 #

直接修改HTML中的按钮，明确指定按钮类型为button，避免触发表单提交：

<h1>Quiz</h1>
<div *ngIf="saveCont && saveCap " class="quescard">
    <form>
        <h1>What is the capital of{{saveCont[userIndex]}}</h1><br>
        <li *ngFor="let cap of options"><button type="button" (click)="changeIndex(1,event)" id="id" class="btn btn-primary btn-block btn-lg">{{cap}}</button></li>
        <li ><button type="button" (click)="changeIndex(1,event)"  class="btn btn-primary btn-block btn-lg" id="idx">{{saveCap[userIndex]}}</button></li><br> 
    </form>
</div>

方法二：在事件处理函数中阻止默认行为 #

取消你TS代码中event.preventDefault()的注释，确保它在函数内执行，阻止表单提交的默认行为：

changeIndex(number: number, event: any){
  event.preventDefault();
  
  if(this.userIndex>0&&number<0||this.userIndex<=this.saveCont.length && this.userIndex<=this.saveCap.length &&number>0){
    this.userIndex+=number;
  }
}

方法三：移除不必要的<form>标签 #

如果这个表单不需要向服务器提交数据，只是用于前端展示题目和选项，直接删掉<form>标签即可：

<h1>Quiz</h1>
<div *ngIf="saveCont && saveCap " class="quescard">
    <h1>What is the capital of{{saveCont[userIndex]}}</h1><br>
    <li *ngFor="let cap of options"><button (click)="changeIndex(1,event)" id="id" class="btn btn-primary btn-block btn-lg">{{cap}}</button></li>
    <li ><button (click)="changeIndex(1,event)"  class="btn btn-primary btn-block btn-lg" id="idx">{{saveCap[userIndex]}}</button></li><br> 
</div>

以上三种方法任选其一都能解决页面重载的问题，推荐第一种或第三种，更直观简洁。

内容的提问来源于stack exchange，提问作者renu manwani