视图未在角度 2 中的组件之间更新答案

【问题标题】：View is not updating between components in anuglar 2视图未在角度 2 中的组件之间更新
【发布时间】：2016-11-19 04:33:45
【问题描述】：

我正在使用 angular2 开发简单的 CRUD 应用程序。我有 ProductListComponent 显示产品列表，此外这个组件还有两个子组件 ProductDetailComponent 和 ProductUpdateComponent。

ProductUpdateComponent 将打开模式并提交表单，成功提交后我导航到ProductListComponent。因此，当我导航到ProductListComponent 时成功更新后，视图没有更新新数据（产品列表没有更新）

产品列表组件

@Component({
   selector: 'product-list',
   moduleId: module.id,
   templateUrl: 'product-list.component.html',
   directives: [ProductDetailComponent, ProductUpdateComponent],
   providers: [ProductService]
})

export class ProductListComponent {
   public products: any;
   constructor(private productService: ProductService) {
        this.productService.getAllProducts()
            .subscribe(
                response => this.products = response.products
            );
   }

}

ProductUpdateComponent

Component({
   selector: 'product-form',
   moduleId: module.id,
   templateUrl: 'product-form.component.html',
   providers: [CheckFormErrors, ProductService]
})

export class ProductFormComponent {
     productForm: ControlGroup;
     formFields: Array<string>;
     view: string;

     @Input()
     pr: Product;
     // form stuff goes here

     // after form submitted
     saveProduct() {
         if (this.productForm.dirty && this.productForm.valid) {
            let form = this.productForm.value
            let formProduct = new Product({
                code: form.code,
                name: form.name,
                price: form.price,
                packing: form.packing,
                description: form.description
            });

            this.productService.updateProduct(this.pr, formProduct)

            // navigate to ProductList
            this.router.navigate(['/']);
            console.log("competed")
    }
  }

请在此处查看详细的完整代码： https://bitbucket.org/asifpy/inventory-manager/src

【问题讨论】：

您正在创建 ProductService 的两个实例，因为它位于多个 providers 数组中。尝试仅将 ProductService 放入组件树中较高的一个 providers 数组中。然后 ProductListComponent 和 ProductFormComponent 将获得相同/单个 ProductService 的实例。
我从 ProductFormComponent 中删除了 ProductService，现在 ProductListComponent aready 有产品服务但没有运气
您应该只在 productUpdate 和 productListConponet 的父级中添加 productService。
您是否确认 ajax 请求正在工作并且数据正在保存在后端？
@ArpitAgarwal：我在app.component 中添加了productService，它是productList 和ProductUpdate 的父级。但仍然是同样的问题。提交更新表单后，我必须刷新同一页面才能看到更新的数据

标签： angular angular2-routing angular2-template angular2-forms

【解决方案1】：

您的代码结构不正确。看看这段代码：

saveProduct() {
    if (this.productForm.dirty && this.productForm.valid) {
      let form = this.productForm.value
      let formProduct = new Product({
        code: form.code,
        name: form.name,
        price: form.price,
        //stock: form.stock,
        packing: form.packing,
        description: form.description
      });

      if(this.pr){
        this.productService.updateProduct(this.pr, formProduct)
      }
      else{
        this.productService.addProduct(formProduct)
      }
      this.router.navigate(['/']);
      console.log("competed")
    }
  }

在您导航之前，您的代码不会等待 http 调用结束。但你不需要导航。您需要在响应时刷新产品模型。为了快速修复，更改 add 和 update 函数以返回 http observable，订阅它们并在回调时执行您的路由。

【讨论】：