如何在 MEAN stack 应用程序成功更新后显示最新/更新的值？

Question

我正在尝试更新我的 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']); 代码路由到显示记录的页面。

这是我导航到 business 路线时的代码运行：

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

更新后有时会显示 new/updated 个值。

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

谁能告诉我为什么更新后有时只显示最新值？

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

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

如何在 MEAN stack 应用程序成功更新后显示最新/更新的值？

How to display latest / updated value after successful update in MEAN stack app?

node.js

angular

mean-stack