Angular 5 - 从API调用返回HttpResponse时，在Template中绑定Observable数据。

Question

我很难理解，当调用返回一个服务时，如何在组件模板中绑定数据。Observable<HttpResponse<T>>. 请看一下我下面的代码，看看我试过什么，什么能用，什么不能用。

注意 LeadQueue 是一个模型，它只是一个简单的接口，上面有属性，所以我在这里省略了它。

元数据.服务.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http'
import { environment } from 'environments/environment';
import { LeadQueue } from 'app/components/dashboard/models/lead-queue.model';
import { Observable } from 'rxjs/observable';

@Injectable()
export class MetadataService {

  constructor(private http: HttpClient) { }

  fetchLeadQueue(): Observable<HttpResponse<LeadQueue[]>> {
    const PATH = `${environment.metadata_Server}/leads/getqueue`;
    return this.http.get<LeadQueue[]>(PATH, { observe: 'response' });
  }

  // ==========> THIS METHOD WORKS AND BINDS CORREVTLY INSIDE THE TEMPLATE
  fetchLeadQueue2(): Observable<LeadQueue[]> {
    const PATH = `${environment.metadata_Server}/leads/getqueue`;
    return this.http.get<LeadQueue[]>(PATH);
  }

}

lead-queue.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { LeadQueue } from '../models/lead-queue.model';
import { MetadataService } from 'app/core/services/metadata.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-lead-queue',
  templateUrl: './lead-queue.component.html',
  styleUrls: ['./lead-queue.component.scss']
})
export class LeadQueueComponent implements OnInit {
  leadQueue$: Observable<LeadQueue[]>;
  errorMsg: string;

  constructor(private metadataService: MetadataService) { }

  ngOnInit() {
    // ==========> THE FOLLOWING WORKS, BUT I CANNOT GET THE HTTPRESPONSE OBJECT FROM IT, AND HANDLE IT ACCORDINGLY
    this.leadQueue$ = this.metadataService.fetchLeadQueue2();


    // ==========> THE FOLLOWING HANDLES THE REPONSE CORRECTLY, AND I CAN SEE THE STATUS CODE BEING RETURNED, BUT THE DATA DOES NOT BIND IN THE TEMPLATE

    // this.metadataService.fetchLeadQueue()
    //   .subscribe(
    //     (response) => {
    //         console.dir(response);
    //         // ==========> I AM ABLE TO SEE THE OUTPUT OF THE RESPONSE OBJECT CORRECTLY IN CHROME INSPECTOR CONSOLE, INCLUDING THE STATUS CODE AND THE DATA IS INDEED IN THE RESPONSE.BODY PROPERTY, BUT DOES NOT WORK IN TEMPLATE BINDING.
    //         this.leadQueue$ = response.body;
    //     },
    //     (error) => {
    //       this.errorMsg = 'A fatal error has occurred. Please notify Support.';
    //       console.error(error);
    //     },
    //     () => {
    //       console.log('>>>>>>>>>>>>>>>>>>>>>','[Lead Queue] service call complete.');
    //     }
    //   );
  }  
}

lead-queue.component.html

<table *ngIf="(leadQueue$ | async)?.length > 0; else noData" class="table">
  <thead>
    <tr>
      <th>Full Name</th>
      <th>Status</th>
      <th>Vetted</th>
    </tr>
  </thead>
  <tbody *ngFor="let item of leadQueue$ | async">
    <tr>
      <td>{{item.Fullname}}</td>
      <td>{{item.Status}}</td>
      <td>{{item.Vetted}}</td>
    </tr>
  </tbody>
</table>
<ng-template #noData>
  <p class="card-text">No leads available.</p>
</ng-template>

如你所见，我已经注释了哪些方法代码块可以使用，哪些不可以。API调用需要相当长的时间来完成，所以理想情况下，我希望通过服务进行调用，并返回HttpResponse和数据。在我的组件中，我希望确保响应状态码等于 200 并如上图所示异步绑定数据。然而，我只成功地得到了 要么 的数据才进行绑定（通过 fetchLeadQueue2() 服务方法），或响应对象（通过 fetchLeadQueue() service方法），它在response.body属性中正确地包含了数据，但在模板中没有绑定。

我将非常感谢SO社区的任何建议! 我非常感谢SO社区的任何建议！先谢谢你。

Answer 1

你能不能在元数据服务里面处理响应？

我不知道你用的是什么rxjs版本，这里我用的是最新的版本。

如

metadata.service.ts

  fetchLeadQueue(): Observable<HttpResponse<LeadQueue[]>> {
    const PATH = `${environment.metadata_Server}/leads/getqueue`;
    return this.http.get<LeadQueue[]>(PATH, { observe: 'response' })
      .pipe(
        map(response => response.body), // handle the response here
        catchError(error => console.log(error))      
      );
  }

lead-queue.component.ts

this.leadQueue$ = this.metadataService.fetchLeadQueue();

希望能帮到你