Angular 2中的HTTP請求方法

Question

我有一個提交食物模型數據的表單。當SubmitFood函數被觸發時，表單提交數據。 SubmitFood函數將模型ie.this.httpService.addFood（this.model）提交到後端工作正常。 但這是我目前想要做的。 表單提交的模型屬於特定的食物類型。所以SubmitFunction應該沿着food_id參數（從url中捕獲的id）提交。 服務addFood也等待一個id（food.id），所以它可以將它綁定到url。所以在這種情況下，當我提交表單的url應該是「http://localhost:8000/api/foods/v1/type/100/location」。即，SubmitFood功能將向服務發送id = 100，以知道要發送的模型屬於哪種食物類型。

addFood(food:any){ 

     const body = JSON.stringify(food); 
     const headers = new Headers(); 
     return this.http.post('http://localhost:8000/api/foods/v1/type/'+food.id+'/location', body, {headers: headers}) 
      .map((data:Response) => data.json()); 

    } 

//component 
export class FoodComponent implements OnInit{ 

    private food_id; 

constructor(private httpService: HttpService , private route:ActivatedRoute) {} 


    ngOnInit() { 

      this.route.params.subscribe(params => {if (params['id']) { 
       this.food_id = params['id']; 
      } 
      }) 
     } 



    model = { 
     type:"", 
     location:"" 

    }; 

    SubmitFood(){ 

     this.httpService.addFood(this.model) 
      .subscribe(data => { 

       console.log(data); 
      }) 
    } 

Answer 1

你只需要food_id傳遞給服務：

SubmitFood(){ 

    this.httpService.addFood(this.food_id) 
     .subscribe(data => { 

      console.log(data); 
     }) 
} 

餐飲服務：

addFood(foodId: number){ 

    const body = JSON.stringify(food); 
    const headers = new Headers(); 
    return this.http.post('http://localhost:8000/api/foods/v1/type/'+foodId+'/location', body, {headers: headers}) 
     .map((data:Response) => data.json()); 

}