在Ionic4中,如何在将调用置于编辑视图并导航回详细信息页面后刷新详细信息视图以获取更新的记录

时间:2019-03-27 11:58:47

标签: ionic-framework angular-ui-router ionic4

我正在用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();
  }

1 个答案:

答案 0 :(得分:2)

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

ionViewWillEnter(){
    this.getClient();
}

每次在页面中输入是否加载时,都会调用this.getClient()方法。