angular - Angular 4 Call HttpResponse inside the component

Question

I'm trying to get the response from my Post with angular 4. This is my code:

app.component.html:

`findAccordiSmall(pagination: Pagination) {
        this.accordiListTableLoading = true;
        debugger;
        this.accordiService.findAccordiSmall(pagination).subscribe(
          (res: HttpResponse<any>) => {
            res.headers.get('offset');
            res.headers.get('count');

            this.agreementList= res.body;

          }      errors => {
        this.accordiListTableLoading = false;
        Utils.notifyErrors(errors, this.notificationsService);
      }
    );

Service.ts

findAccordiSmall(pagination: Pagination): Observable<HttpResponse<any>> {

    const queryParams = this.getHttpParams(pagination).toString();

    return this.http.post(`${this.ENDPOINT}/agreements-paginated?${queryParams}`,pagination, { observe: 'response' })
        .catch(error => Utils.handleError(error, this.router, 'Errore nel recupero delle pratiche'));
}

The POST is sending me every data I want (headers, response etc) but I just cant use those values inside my components. How can I call them? I have to fill: agreementList: Agreement[]; with the response.

Sorry for the confusion, if you need something more just tell me.

EDIT:This is my response

Edit2:

Component.ts

  findAccordiSmall(pagination: Pagination) {
    this.accordiListTableLoading = true;
    this.accordiService.findAccordiSmall(pagination).subscribe(
      (res: Agreement[]) => {
        this.agreementList= res;
      },
  errors => {
    this.accordiListTableLoading = false;
    Utils.notifyErrors(errors, this.notificationsService);
  }
);

service.ts

 findAccordiSmall(pagination: Pagination): Observable<Agreement[]> {

        const queryParams = this.getHttpParams(pagination).toString();
        debugger;
        return this.http.post<Agreement[]>(`${this.ENDPOINT}/agreements-paginated?${queryParams}`,pagination, { observe: 'response' })
            .map(res => res)
            .catch(error => Utils.handleError(error, this.router, 'Errore nel recupero delle pratiche'));}

标签： angulartypescripthttpresponse

Answer 1

如果您需要填写agreementList: Agreement[]响应，您需要做的就是将res（服务函数返回的值）分配给它。无需使用res.body. 你有this.agreementList= res.body;. 这是错误的。此行应为this.agreementList = res;

编辑：更新的组件代码：

findAccordiSmall(pagination: Pagination) {
    this.accordiListTableLoading = true;
    debugger;
    this.accordiService.findAccordiSmall(pagination).subscribe(
      (res: Agreement[]) => {
        this.accordiListTableLoading = false;
        this.agreementList= res;
      },
  errors => {
    this.accordiListTableLoading = false;
    Utils.notifyErrors(errors, this.notificationsService);
  }
);

我用正确的返回值更新了你的服务函数，你还需要map覆盖它。

findAccordiSmall(pagination: Pagination): Observable<Agreement[]> {

const queryParams = this.getHttpParams(pagination).toString();

return this.http.post<Agreement[]>(`${this.ENDPOINT}/agreements-paginated?${queryParams}`,pagination, { observe: 'response' })
    .map(res => res)
    .catch(error => Utils.handleError(error, this.router, 'Errore nel recupero delle pratiche'));

}

所以现在它返回Observable<Agreement[]>，这意味着当您订阅它时，res内部 subscribe 将从Observable, and it's type will be协议 []中解开

subscribe((res: Agreement[]) => {})