Angular http post通过服务将数据返回给组件

时间:2017-09-12 07:08:46

标签: javascript angular typescript observable angular-services

我想将数据(@@ identity)从sql server通过服务返回到组件

Web api肯定被调用并重新发送数据。

但是,由于我是Angular 2/4的新手(我习惯于角度1),我通常会在服务上执行return,并将一个变量或对象设置为调用者。

目前这就是我正在做的事情

组件

this.trackerFormService.addSession();  // CURRENT

但由于该值是单个id,如5,我不应该在typescript中创建一些内容来检索它吗?

this.myId = this.trackerFormService.addSession();    // ???

然后在服务中

private _url = 'http://localhost:60696/api/tracker';

addSession() { 
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    this.http.post(this._url, JSON.stringify({}), options).catch(this.handleError).subscribe();

}

现在上面要将服务中的ID(addSession()方法传递回组件,不应该return吗?

return this.http.post(this._url, JSON.stringify({}), options).catch(this.handleError).subscribe();

但这真的会起作用吗?

Web api(.net core)看起来像这样

return Created($"api/sessiontrackers/{sessionTracker.Id}", sessionTracker);

2 个答案:

答案 0 :(得分:3)

这肯定可以帮助您对web api进行发布呼叫

https://dheerajsroy.wixsite.com/dheerajkumar/single-post/2017/09/07/How-to-make-Post-Call-in-Angular-2

在您的服务中

 return this.http.post(Url, JSON.stringify(data), requestOptions)
              .map((response: Response) => response.json())

在您的组件中

this.service.addSession(this.data).subscribe(
      data => { console.log(data) // Data which is returned by call
      },
      error => { console.log(error); // Error if any
      },
      ()=> // Here call is completed. If you wish to do something 
      // after call is completed(since this is an asynchronous call), this is the right place to do. ex: call another function
    )

答案 1 :(得分:2)

您可以从Observable返回addSession,而不.subscribe

addSession() { 
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this._url, JSON.stringify({}), options).catch(this.handleError);
}

由于这是异步调用,subscribe到您的组件中的observable,以及何时完成调用,请将值分配给myId

this.trackerFormService.addSession().subscribe(result => this.myId = result);