如何通過角度發送數據到服務器2

Question

在Angular 2中我如何根據表單模型向服務器發送數據。在某些情況下，我可以通過單擊addMore按鈕添加更多行。

enter image description here

Answer 1

使用HTTP類，在其最基本的形式，可以利用這樣的：

export class EndPointService { 

    constructor(private _http: Http) { 
    } 

    public postData(url: string, data: any): Response { 
     return this._http.post(url, data).map((res: Response) => { 
      return res.json(); 
     } 
    } 
} 

Answer 2

首先，你需要導入HttpModule，如果你要送json_encoded數據，您還需要導入JsonpModule。您可以從@angular/http導入這兩個模塊，並將其添加到您的app.module.ts文件作爲@NgModule

app.module.ts內進口：

import { HttpModule, JsonpModule } from '@angular/http'; 

@NgModule({ 
    imports: [ 
     ..., 
     HttpModule, 
     JsonpModule 
    ], 
    bootstrap: [AppComponent] 
}) 

接下來的步驟是讓一個服務，將處理Http請求。您需要從rxjs包中導入Observable對象和map方法來處理響應。此外，如果要使用POST HTTP請求發佈數據（所有對象都在@angular/http中），則需要導入Http，Response，Headers和RequestOptions對象。在服務中，您設置了可從組件訪問並使用它的功能將數據發送到服務器，並趕上，你可以訂閱響應

http.service.ts：

import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 

@Injectable() 
export class HttpService { 

    private _url: string = "http://example.com"; // Url which handles JSON encoded data 

    constructor(private _http: Http) {} // Injecting the Http Service 

    sendData(data): Observable<Object> { 

     let encoded_data = JSON.stringify({ data }); 
     let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this._http.post(encoded_data, this._url, options).map(
      (res: Response) => res.json() || {} 
     ); 

} 

在組件需要導入的服務和使用您的方法剛剛創建，您也可以訂閱此方法以獲得響應。

個example.component.ts：

import { Component, OnInit } from '@angular/core'; 
import { HttpService } from 'http.service'; 

@Component({ 
    ... 
}) 
export class ExampleComponent implements OnInit { 

    constructor(private _httpService: HttpService) {} 

    ngOnInit() {} 

    sendDataToServer(dataFromForm) { 

     this._httpService.sendData(dataFromForm).subscribe(

      response => console.log(response), // success 
      error => console.log(error),  // error 
      () => console.log('completed')  // complete 

    } 

} 

更多信息可以在這裏HTTP Client