ionic-framework - 在 Ionic4 中，如何在将调用放入编辑视图并导航回详细信息页面后刷新详细信息视图以获取更新的记录

Question

我正在用 Ionic4 制作一个简单的杂物，一切正常。当我通过 put 调用更新我的记录并导航回记录的详细信息以查看更新的值时，它会显示旧值。我的更新和导航代码是：

async updateClient() {
  await this.api.updateClient(this.route.snapshot.paramMap.get('id'), this.clientForm.value)
  .subscribe(res => {
      let id = res['_id'];
      this.router.navigate(['/client/detail', id]);
    }, (err) => {
      console.log(err);
    });
}

详细页面代码是：

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { RestApiService } from '../../rest-api.service';
import { ActivatedRoute, Router } from '@angular/router';
import {Location} from '@angular/common';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
  client: any = {};
  constructor(public api: RestApiService,
    public loadingController: LoadingController,
    public route: ActivatedRoute,
    public router: Router,
    private location: Location) {}
    async getClient() {
        console.log('in getClient');
        const loading = await this.loadingController.create({
        });
        await loading.present();
        await this.api.getClientById(this.route.snapshot.paramMap.get('id'))
          .subscribe(res => {
            console.log(res);
            this.client = res;
            loading.dismiss();
        }, err => {
            console.log(err);
            loading.dismiss();
        });
    }
  ngOnInit() {
    this.getClient();
  }

标签： ionic-frameworkangular-ui-routerionic4

Answer 1

尝试this.getClient()在方法中调用方法，ionViewWillEnter()如下所示：

ionViewWillEnter(){
    this.getClient();
}

每次进入页面时它都会调用你的this.getClient()方法，无论它是否加载。