我正在尝试制作一个同时包含前端和后端的应用程序。我已经完成了这两个程序,但是现在我在尝试连接它们时遇到了一些麻烦。我不断收到以下错误:
目录.组件.ts:45错误错误:NG0900:尝试对“[object Object]”进行差异比较时出错。DefaultIterableDiffer.diff(core.mjs:28514:19)中只允许数组和可迭代对象
首先,我尝试获取数组“response”,即产品所在的位置:
PRODUCT.SERVICE.TS
public getAll(): Observable<Product[]> {
return this.http.get<Response["response"]>(this.productsUrl);
}
此方法接收以下响应:
{
"httpCode": 200,
"message": "OK",
"response": [
{
"pieceName": "Mini Figure Trophy",
"pieceImageURL": "https://www.lego.com/cdn/product-assets/element.img.lod5photo.192x192/6335932.jpg",
"piecePrice": 0.3,
"pieceTag": "Bestseller",
},
{
"pieceName": "Animal No. 17 Dog",
"pieceImageURL": "https://www.lego.com/cdn/product-assets/element.img.lod5photo.192x192/6076467.jpg",
"piecePrice": 2.76,
"pieceTag": "Bestseller",
}
]
}
然后,当目录页打开时,我运行以下两个函数:
CATALOG.COMPONENT.TS
ngOnInit(): void {
this.getProducts();
this.searchSubject.subscribe(value => this.searchService.setSearchValue(value));
this.searchService.searchValue$.subscribe(value => {
this.productService.getProductByNameLike(value).subscribe(productsCalled => {
this.products = productsCalled})
})
}
getProducts(): void {
this.productService.getAll().subscribe({ <- Line where the error occurs
next: (productsCalled: Product[]) => {
this.products = productsCalled
this.checkProductsOnCart()
},
error: (err) => console.log(err),
complete: () => console.log("completo")
});
}
但是我一直得到NG0900错误,我相信这可能是因为我没有阅读产品所在的数组。
我已经更改了getAll方法,与原来一样:
public getAll(): Observable<Product[]> {
return this.http.get<Product[]>(this.productsUrl);
}
我也试着在这里搜索其他答案,但似乎没有一个适合我的问题,或者也许我只是一个新手太多,看到的关系。有人知道我做错了什么吗?提前感谢。
1条答案
按热度按时间fdbelqdn1#
JSON响应是一个对象。
使用
rxjs
中的map
从response
属性返回数组。