Javascript 如何在启动模式中单击保存按钮后禁用刷新页面？

我在angular应用程序中使用引导模式来添加新作者。 每次页面刷新时单击saveAuthor（）时，以及单击“删除”按钮时，页面是否也会刷新？ 在我的应用程序中，我也在modal中使用modal。 当我打开第二个模式并希望保存更改时，页面也会刷新，并且两个模式都会更新 关闭 按钮上是否有可以修复它的属性？ 如何禁用页面刷新

My code:

    <div class="button">
  <button type="button" class="btn btn-info"
          style="margin-top: 20px; margin-left: -20px"
          data-toggle="modal"
          data-target="#addAuthor"
          data-backdrop="static" data-keyboard="false">Add Author
  </button>
</div>

<table class="table table-striped" style="margin-top: 50px; width: 45%; border-radius: 10px !Important">
  <thead>
  <tr>
    <th scope="col"></th>
    <th scope="col"><h4> Author name </h4></th>
    <th scope="col"><h4> Adress </h4></th>
    <th scope="col"><h4 style="padding-left: 35px"> Actions </h4></th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let author of authorList">
    <th scope="row"></th>
    <td><b>{{ author.name }}</b></td>
    <td><b>{{ author.address }}</b></td>
    <td>
      <button style="width: 70px" class="btn btn-outline-info" (click)="editAuthor()">Edit</button>
      <span style=" padding-left: 10px">
      <button style="width: 70px;" class="btn btn-outline-danger"
              (click)="deleteAuthor(author.id)">Delete
      </button>
      </span>
    </td>

  </tr>
  </tbody>
</table>

<!-- ADD AUTHOR-->
<div class="modal fade" id="addAuthor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">


      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Author</h5>
        <button class="close" id="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>


      <div class="modal-body">
        <form>

          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" required [(ngModel)]="author.name" name="name">
          </div>

          <div class="form-group">
            <label for="address">Address</label>
            <input type="text" class="form-control" id="address" required [(ngModel)]="author.address" name="address">
          </div>

        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-info" id="btn" data-dismiss="modal"
                  (click)="saveAuthor()">OK
          </button>
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>

</div>

---

您需要防止默认的按钮。选中此项：

---

preventDefault在这种情况下不起作用，我使用本地json服务器（伪api），可能调用api会导致问题。。。

import {Component, OnInit} from '@angular/core';
import {Author} from '../author';
import {AuthorService} from '../author.service';
import {Router} from '@angular/router';


@Component({
  selector: 'app-author',
  templateUrl: './author.component.html',
  styleUrls: ['./author.component.css']
})
export class AuthorComponent implements OnInit {
  authorList: Author[] = [];
  author: Author = new Author();

  constructor(private authorService: AuthorService, private router: Router) {
  }

  ngOnInit(): void {
    this.getAuthors();
  }

  getAuthors(): void {
    this.authorService.getAuthorList()
      .subscribe(res => {
          this.authorList = res;
        },
        error1 => console.log(error1)
      );
  }

  saveAuthor(): void {
    this.authorService.createAuthor(this.author)
      .subscribe(
        createdAuthor => this.authorList.push(createdAuthor),
        error => console.log(error));
  }

  editAuthor(): void {
  }

  deleteAuthor(id: number): void {
    if (confirm('Are you sure to delete this author ?')) {
      this.authorService.deleteAuthor(id)
        .subscribe(
          data => {
            this.authorList.slice(id);
          },
          err => console.log(err));
    }
  }
}