Question

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

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

Answer 1

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

    ngOnInit() {
    }

    ionViewWillEnter() {
        this.getBook();
    }

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

Answer 2

我通过移动ngOnInit（）中的函数调用解决了这个问题 reload（）函数是用户定义的。我还取消了存储变量的数据，并在用户定义的reload（）中调用了基本功能，因此这也显示了在后台重新加载数据的效果。

假设您认为您的所有基本功能都在ngOnInit（）中，并且数据存储在变量datavar1，datavar2中，因此您可以在下面进行操作

reload(){
   datavar1 = undefined;
   datavar2 = undefined;
   ngOnInit();
}

在上面的代码示例中，ngOnInit（）具有重要的代码，例如api调用等，而datavar1和datavar2变量具有api调用的响应

如何在Ionic 4中刷新页面

2 个答案: