我已经创建了一个服务，当调用该服务并对订阅服务器中的参数进行控制台日志记录时，它显示我的类为空。我过去使用过Observable，从未遇到过这个问题。如果我觉得合适的话，参数可以是任何名称。下面的代码段。
My service
export interface Products{
_id: string,
name: string
}
@Injectable({
providedIn: 'root'
})
export class SearchService {
constructor(private http:HttpClient) { }
rootUrl = '/api'
searchProducts(query:string) {
console.log("Does it get my searchProducts");
return this.http.post<{payload: Array<Products>}>(this.rootUrl + '/getProducts', {payload: query}, {
headers: new HttpHeaders({'Content-Type': 'application.json'})
}).pipe(
map(data => data.payload)
);
}
}
我的组件.ts
sendData(event:any){
let query:string = event.target.value;
this.searchService.searchProducts(query.trim()).subscribe(results =>{
console.log(results); //results is a empty array
});
}
有人能告诉我吗？
您的API响应是否包含一个名为payload的字段？如果是，它有价值吗？
我建议将您的控制台日志向上移动一个级别，这样您就可以看到API响应是什么以及它有哪些字段。像这样的
searchProducts(query:string) {
console.log("Does it get my searchProducts");
return this.http.post<{payload: Array<Products>}>(this.rootUrl + '/getProducts', {payload: query}, {
headers: new HttpHeaders({'Content-Type': 'application.json'})
}).pipe(
map(data => {
console.log('API Response => ', data);
return data.payload
})
);
}
在data.payload之前添加return，如下所示：
searchProducts(query:string) {
console.log("Does it get my searchProducts");
return this.http.post<{payload: Array<Products>}>(this.rootUrl + '/getProducts', {payload: query}, {
headers: new HttpHeaders({'Content-Type': 'application.json'})
}).pipe(
map(data => return data.payload)
);
}
如果仍然不起作用，那么它可能是空白的，因为您如何处理请求数据。你是说帖子将接收以下格式的数据：
{payload: Array<Products>}
带有产品数组的参数的对象，可能与来自API的实际数据格式不匹配。
如果您知道它将是一个数组，则更改为<Products[]>，如果您知道这将是一个中包含数组的对象，则尝试<{Products[]}>或<{payload: Products[]}>，如果不起作用，则尝试删除<>和其中的所有内容。
如果API没有接收到{payload: String}格式的请求，那么也不会按照您的要求发送请求主体。