보기에서 구성 요소 사이에 업데이트되지 않습니다. 2

Question

나는 angular2를 사용하는 간단한 CRUD 응용 프로그램을 만들고 있습니다. 제품 목록을 표시하는 ProductListComponent을 가지고 있으며,이 구성 요소에는 두 개의 하위 구성 요소 ProductDetailComponent과 ProductUpdateComponent이 있습니다.

ProductUpdateComponent은 모달을 열어 양식을 제출하고 제출이 성공하면 ProductListComponent으로 이동합니다. 내가 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

Answer 1

코드가 올바르게 구조화되지 않았습니다. 이 코드를 보면 : 당신이 이동하기 전에 HTTP 호출이 종료하는

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 관찰 가능을 반환하고 구독 할 수 있으며 통화 중에 다시 경로를 결정할 수 있습니다.