我創建了一個服務，當呼叫該服務并在訂閱者中執行引數的控制臺日志時，它顯示我的類為空。我過去曾使用過 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
});
}
誰能告訴我？
uj5u.com熱心網友回復：
您的 API 回應是否包含名為有效負載的欄位？如果有，它有價值嗎？
我建議將您的控制臺日志上移一個級別，以便您可以看到 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
})
);
}
uj5u.com熱心網友回復：
像這樣添加return之前data.payload：
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[]>，如果您知道這將是一個物件，其中包含一個陣列，則 try<{Products[]}>或<{payload: Products[]}>，如果不起作用，請嘗試洗掉其中的<>所有內容。
如果 API 沒有以{payload: String}格式接收，那么這同樣適用于您發送請求正文的方式，然后不執行您要求的操作。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/436975.html