如何通过角度发送数据到服务器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