Question

在Angular 2中如何根据表单模型将数据发送到服务器。在某些情况下，我可以通过单击addMore Button添加更多行。

Answer 1

首先，您需要导入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请求的服务。您需要从Observable包导入map对象和rxjs方法才能使用响应。此外，如果要使用POST HTTP请求发布数据，则需要导入Http，Response，Headers和RequestOptions对象（所有对象都在@angular/http。在服务中，您设置了可以从您的访问权限中访问的功能组件并使用它将数据发送到服务器并捕获您可以订阅的响应。

<强> 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

Answer 2

使用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();
        }
    }
}

如何通过角度2将数据发送到服务器

2 个答案: