角2はAPI呼び出しを同期します

Question

角度2を初めて使用しました。私は、APIからの応答の後にテンプレートをレンダリングしようとしましたが、私は、テンプレートレンダリングの後にAPIコールの応答が得られるような問題に直面しています。

私のコードスニペットの一部は次のとおりです。

ngOnInit() { 
    let productId = this.route.snapshot.params['id']; 

    this.CommonService.fetchData("http://192.168.1.107:9000/api/test/user/userId.json?id=" + productId).subscribe(
    (data) => { 
     this.productData = data[0]; 
     console.log(this.productData); 
    } 
) 
    this.productAdd = this._formBuild.group({ 
    firstName: [this.productData["firstName"]], 
    shortName: [this.productData["shortname"]], 


    }) 
} 
fetchData(url){ 
    return this.http.get(url).map(
    (res) => res.json() 
) 
} 

誰も私を助けることができますか？

Answer 1

コールAjax APIの前にFormGroupを作成する必要があります。 サービスの終了後にデータを更新します。

ngOnInit() { 

    this.productAdd = this._formBuild.group({ 
     firstName: '', 
     shortName: '' 
    }); 

    let productId = this.route.snapshot.params['id']; 
    this.CommonService 
    .fetchData("http://192.168.1.107:9000/api/test/user/userId.json?id=" + productId) 
     .subscribe((data) => { 
      const result = data[0]; 
      this.productAdd.patchValue({ 
       firstName: result.firstName, 
       shortName: result.shortName 
      }) 
     }); 

}); 

サービス

fetchData(url){ 
    return this.http.get(url) 
     .map((res)=>res.json()); 
}