アンギュラー2のコンポーネント間でビューが更新されない

Question

私はangle2を使用している簡単なCRUDアプリケーションに取り組んでいます。私は製品のリストを表示するProductListComponentを持っており、さらにこのコンポーネントには2つの子コンポーネント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のobservableを返すためのaddおよびupdate関数を呼び出し、それらにsubscribeしてコールバックであなたのルートを行います。