在 MEAN 堆栈应用程序中成功更新后如何显示最新/更新的值？答案

【问题标题】：How to display latest / updated value after successful update in MEAN stack app?在 MEAN 堆栈应用程序中成功更新后如何显示最新/更新的值？
【发布时间】：2019-12-07 06:26:31
【问题描述】：

我正在尝试更新我的 MEAN 堆栈应用程序中的记录。

以下是我的一些更新代码：

updateBusiness(person_name, business_name, business_gst_number) {
    this.route.params.subscribe(params => {      
      this.bs.updateBusiness(person_name, business_name, business_gst_number, params['id']);
      this.router.navigate(['business']);
    });
}

以上代码更新记录成功，执行完这段代码就可以搜索mongodb了。

上面的this.router.navigate(['business']); 代码路由到显示记录的页面。

这是我导航到businessroute 时运行的代码：

 ngOnInit() {
    this.bs
      .getBusinesses()
      .subscribe((data: Business[]) => {
        this.businesses = data;
      });
}

更新后有时会显示新的/更新的值。

但有时会显示较旧的值。但是，当我刷新页面时，会显示更新后的值。

谁能告诉我为什么最新的值只是在更新后才显示？

【问题讨论】：

标签： node.js angular mean-stack

【解决方案1】：

由于更新是异步操作，因此您并没有真正按顺序执行操作。您正在启动更新，然后在它完成之前立即导航。要解决此问题，请订阅组件中的更新并在完成后导航：

updateBusiness(person_name, business_name, business_gst_number, id) {

    const obj = {
      person_name: person_name,
      business_name: business_name,
      business_gst_number: business_gst_number
    };

    return this //return the observable
      .http
      .post(`${this.uri}/update/${id}`, obj);
}

组件：

updateBusiness(person_name, business_name, business_gst_number) {
    this.route.params.subscribe(params => {      
      this.bs.updateBusiness(person_name, business_name, business_gst_number, params['id'])
             .subscribe(res => this.router.navigate(['business'])); // subscribe and navigate when done
      ;
    });
}

这保证在更新完成之前不会导航。

【讨论】：