如何在Ionic 4中刷新页面 [英] How to refresh page in ionic 4

问题描述

我想在成功删除数据后刷新页面.当我删除或更新时，我必须先刷新页面，然后刷新我的数据.如何在Ionic 4中使用navController，请帮助我...

I want to page refresh after successfully deleting the data. When i am deleting or updating then i have to do page refresh then my data refresh . How to use navController in ionic 4 please help me...

book-list.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Book List
    </ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/user-detail">
        <ion-icon name="add-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>


    <ion-card-content>
      <ion-card-subtitle>Books:</ion-card-subtitle>

      <ion-list *ngFor="let book of books">
          <ion-item>
            <ion-label text-wrap>
                <ion-text>
                    <p>Title: {{book.title}}</p>
                </ion-text>
                <ion-text>
                    <p>Description: {{book.description}}</p>
                </ion-text>
              </ion-label>
              <ion-button [routerLink]="['/edit-book/',book.id]" (click)="editBook(book.id)">
                <ion-icon name="create" slot="end"></ion-icon>
              </ion-button>
              <ion-button color="danger" (click)="delete(book.id)">
                  <ion-icon name="trash" slot="end"></ion-icon>
              </ion-button>

          </ion-item>
        </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

book-list.page.ts

import { Component, OnInit } from '@angular/core';
import { Book } from '../book';
import { first } from 'rxjs/operators';
import { UserService } from '../user.service';
import { AlertController } from '@ionic/angular';
import { ToastController } from '@ionic/angular';
import { Router } from '@angular/router';
import {  NavController, NavParams } from '@ionic/angular';
@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.page.html',
  styleUrls: ['./book-list.page.scss'],
})
export class BookListPage implements OnInit {
  books: Book[] = [];
  constructor(private router: Router,public navCtrl: NavController,public toastController: ToastController, private userService: UserService, public alertController: AlertController) { }

  ngOnInit() {
    this.getBook();
  }

  getBook() {
    this.userService.getBook().pipe(first()).subscribe(books => {
      this.books = books;


    });
  }

  async delete(id: number) {

    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: 'Are you sure want to delete this book details?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            this.userService.delete(id).pipe(first()).subscribe(async books => {

              books = books
              const toast = await this.toastController.create({
                message: 'Your Book details have been deleted.',
                duration: 2000

              });
              toast.present();
              this.router.navigate(['book-list']);
            });
          }

        }
      ]
    });

    await alert.present();

  }
  editBook($id) {
    this.userService.setCurrentId($id);

  }

}

这是我的代码，请帮助我如何刷新ionic中的页面以及如何在此代码中使用NavController

This is my code plase help me how to refresh pages in ionic and how to use NavController in this code please help me

推荐答案

我通过将ngOnInit()中的函数调用移到ionViewWillEnter()中解决了这个问题.尝试将book-list-page.ts中的代码更改为:

I solved this problem by moving the function call in the ngOnInit() into ionViewWillEnter(). Try changing your code in book-list-page.ts to:

    ngOnInit() {
    }

    ionViewWillEnter() {
        this.getBook();
    }

我不知道这是正确的方法还是最好的方法，但对我来说，解决方案效果很好.

I don't know if that's the right or best way to do it but for me the solution works nicely.

这篇关于如何在Ionic 4中刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！