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

导入队列组件.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()服务方法((它将数据正确地包含在Response.body属性中，但不在模板中绑定(。

我将非常感谢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();

希望它能帮助