为什么 Observable 订阅使我的 Class 为空

Question

我创建了一个服务，当调用该服务并在订阅者中执行参数的控制台日志时，它显示我的 class 为空。我过去使用过 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)
     
    );
        
  }

}

我的Component.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
   });
 }

谁能告诉我？

Answer 1

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

}

Answer 2

像这样在 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)
     
    );
        
  }

如果仍然不起作用，则由于您处理请求数据的方式，它可能是空白的。您是说 post 将接收以下格式的数据：

{payload: Array<Products>}

带有产品数组参数的对象，可能与来自 API 的真实数据格式不匹配。

如果您知道它将是一个数组，则更改为 <Products[]>，如果您知道它将是一个内部包含数组的对象，请尝试 <{Products[]}> 或 <{payload: Products[]}>，如果不'work try to remove the <> and everything inside.

如果 API 没有收到 {payload: String} 格式的请求，那么发送请求正文的方式也是如此。

为什么 Observable 订阅使我的 Class 为空

Why is Observable Subscribe Making My Class Empty

express

rxjs

typescript

angular