web-dev-qa-db-fra.com

Comment actualiser la page In ionic 4

Je souhaite rafraîchir la page après avoir supprimé avec succès les données. Lorsque je supprimons ou mises à jour, je dois faire une actualisation de page, puis mes données actualisées. Comment utiliser NAVCONTROLLER IN ionic 4 s'il vous plaît aidez-moi ...

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

  }

}

Ceci est mon code plase aidez-moi à rafraîchir les pages dans ionic et comment utiliser NavController dans ce code s'il vous plaît aidez-moi

angularionic4
5
Dinesh Vishwakarma

J'ai résolu ce problème en déplaçant l'appel de la fonction dans la fonction Ngoninit () à recharger () Ceci est un utilisateur défini par l'utilisateur. Et j'ai également annulé les données stockées les variables et appelées fonctionnalités de base dans la recharge définie par l'utilisateur () de sorte que cela montre également et Effet des données relinées en arrière-plan

Supposons que vous pensez que votre fonctionnalité de base est dans Ngoninit () et les données stockées dans Variables Datavar1, DataVar2 afin que vous puissiez faire comme ci-dessous

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

Dans l'exemple de code ci-dessus, le code Ngoninit () a le code important comme les appels d'API, etc. et les variables DataVar1 et DataVar2 ont la réponse des appels d'API

0
vyshnavkumar