Angular 4 在组件内部调用HttpResponse

Question

我正在尝试使用 angular 4 从我的 Post 获得响应。这是我的代码：

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'));
}

POST 正在向我发送我想要的所有数据（headers、响应等），但我无法在我的组件中使用这些值。我怎么给他们打电话？我必须填写： agreementList: Agreement[]; 回复。

抱歉让您感到困惑，如果您需要更多信息，请告诉我。

编辑：This is my response

编辑 2：

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'));}

Answer 1

如果您需要用响应填充agreementList: Agreement[]，您需要做的就是将res（值return由服务功能编辑）分配给它。无需使用 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);
  }
);

我用正确的 return 值更新了您的服务函数，您还需要 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'));

}

所以现在它 returns Observable<Agreement[]>，这意味着当您订阅它时，订阅内的 res 将从 Observable, and it's type will be 协议[]`

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

Angular 4 在组件内部调用HttpResponse

Angular 4 Call HttpResponse inside the component

httpresponse

typescript

angular