如何在 ionic 4 中刷新页面

2024-01-11

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

图书列表.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>

图书列表.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 请帮助我


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

    ngOnInit() {
    }

    ionViewWillEnter() {
        this.getBook();
    }

我不知道这是否是正确或最好的方法,但对我来说,该解决方案效果很好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 ionic 4 中刷新页面 的相关文章

  • 在 Angular 上开发时无法自动完成和自动导入

    我已经在 Windows 上安装了最新的 VSCode 然后我安装了 languaje 对 TypeScript 的支持 最后 设置一些编辑器选项并安装一些扩展 编辑器配置 editor fontSize 12 editor minimap
  • 很棒的字体图标没有出现在 Angular 5 中

    我按照说明安装了它 首先我输入了 npm install save font awesome angular font awesome 并且一切都正确安装了 然后我换了 angular cli json包含这样的 css styles st
  • 为什么 Angular-CLI 'ng build' 显示“Killed”?

    当我添加一个新模块时 ng build过程刚刚得到killed 从此comment https github com angular angular cli issues 3260 issuecomment 269666665 here 我
  • 手动刷新 Angular 之前页面无法正常显示

    我面临着非常奇怪的问题 我的角度应用程序页面显示正确 它似乎没有完全加载 当我手动重新加载 刷新页面时 它的加载正常 这是完整的场景 我创建了一个登录页面 该页面显示完美并按预期工作 登录后 我导航到仪表板页面 该页面未正确显示 似乎加载了
  • 单元测试 HttpClientModule 时出错(Angular 4.3+)

    我正在探索新的 Angular HttpClientModule 并遇到莫名其妙的错误 该模块足够新 我还找不到任何有关如何进行单元测试的有用信息 并且官方文档没有任何示例 该应用程序包含一个具有一种方法的服务 该方法将 URL 传递给ht
  • 所有 'size' 、 'prototype' 的声明必须具有相同的修饰符

    I have downloaded code from repository and run it on local getting these errors have following versions when i run ionic
  • 带有 angular-cli 的 SVG 图标系统

    我有一个 Angular2 项目 它是通过 Angular CLI 创建的 在 webpack 中 有一个加载器来加载 svg sprite 并从 svgs 列表生成该 sprite 但是 当 angular cli 不允许我更改 webp
  • 是否可以在 Ionic 2 中存储 firebase 数据并以离线模式运行应用程序功能?

    我找到了一些关于 Ionic 2 离线模式 firebase 的教程 但我仍然不知道如何在我的应用程序中启用这个功能 那么 firebase真的支持离线模式吗 如果是 我可以存储所有收到的数据吗 and 在离线模式下运行功能 firebas
  • Angular 2 形式 + OnPush

    我正在编写一个 Angular 2 应用程序 出于性能原因 我尝试在任何地方使用 ChangeDetectionStrategy OnPush 我有一个复杂的组件 需要 OnPush 才能顺利工作 其中包含另一个显示表单的组件 使用 For
  • Angular 6 HTTP 客户端发布 - 错误请求

    我有以下问题 我有一个 API 所在的服务器 我将请求发送到注册端点 但作为响应 我收到 400 错误请求错误 指出必须填写姓名 电子邮件等 问题是它们已经满了 我不再怀念创意了 我的代码 import Component from ang
  • Angular 2 + Auth0(找不到模块“auth0-js”的声明文件。)

    找不到模块 auth0 js 的声明文件 C sandbox loginauth0 node modules auth0 js src index js 隐式具有 any 类型 我想使用 auth0 登录 但在按照说明构建我自己的 Angu
  • 从 Angular 6 服务中绑定图像

    我有一个端点 它根据某些参数为我提供图像 这不是一个图像网址 而是一个普通图像 因此 当我到达邮递员中的端点时 作为响应 我收到一张图像 JPG 我是否可以在变量中接收该图像并将其绑定到 HTML 标签中 所有问题都有将图像 url 映射到
  • “.builders['browser']”应该具有必需的属性“class”

    使用 npm install 成功安装依赖项后 在运行服务器时出现以下错误 Schema validation failed with the following errors Data path builders browser shou
  • 如何使用 Angular 5 在单击按钮时调用多个方法?

    我正在使用 Angular 5 并面临问题 我想提交 点击 事件并一一调用两个或多个方法 请给我想法或解决方案 以便我可以提交 点击 事件并调用两个或多个方法 such as html 文件
  • 将打字稿中的字符串转换为时间格式

    我必须将服务器数据转换为字符串格式13 47 to 01 47PM但我正在尝试 time date hh MM and task time date shortTime 但它显示日期管道错误和参数错误 运行时错误 InvalidPipeAr
  • 严格模式下不允许属性的多个定义 - Angular

    我在 IE 中的 Angular 6 项目中遇到了这个问题 这导致应用程序无法加载 它仅发生在应用程序的产品版本中 该版本由 Angular 连接和缩小 在 ngserve 下运行的本地开发版本并未导致该问题 此错误出现在 Chrome 开
  • 如何检查 Angular 7 中的输入字段是否处于焦点[重复]

    这个问题在这里已经有答案了 我有一个表单 我想知道表单中的任何输入字段是否获得焦点 我读了 NgForm 文档但没有找到任何相关的 focus I found touched但它不能满足需求 您可以使用焦点和模糊事件来跟踪字段获得或失去焦点
  • Angular 2:ngModel 输入上“数字”管道的光标问题

    我有一个输入 我想像货币一样显示 我希望只允许两位小数 并且只允许数字 同时在必要时自动添加逗号 基本上 如果用户输入 12345 我希望输入自动显示为 12 345 00 12 345 也可以接受 但如果他们输入 12345 5 则需要显
  • 导入 ng2-datetime 时遇到问题

    我正在尝试将 ng2 datetime 导入到我的应用程序中 因为它似乎是唯一可用的日期选择器弹出窗口 可以让您限制日期范围 无论如何 根据其文档 https www npmjs com package ng2 datetime 我安装了n
  • 如何仅使用 TypeScript 声明属性为字符串类型的对象?

    我的组件中有一个像这样的配置数组 config ButtonConfig this config push new ButtonConfig 今天 我意识到让数组表现得像字典更有意义 这样我就可以不通过数字索引而是通过名称规范地访问特定元素

随机推荐