单击引导模式中的“保存”按钮后如何禁用刷新页面？

Question

I am using bootstrap modal in angular application to add new author. When i click on saveAuthor() every time page refresh and it also refresh when i click delete button ? I also use modal in modal in my application. When I open the second modal and want to save changes the page is also refreshed and both modals are closed. Is there any attribute on button which can fix it ? How can i disable page refreshing ?

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>

Typescript:

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));
    }
  }
}

Answer 1

You'll need to prevent the default of the button. Check this: Event.preventDefault()