订阅角度中的下一个参数类型错误

Posted 2023-03-07

【中文标题】订阅角度中的下一个参数类型错误

【英文标题】：subscribe next parameter types error in angular

【发布时间】：2021-08-12 00:10:06

【问题描述】：

我在下面分享了我的错误和代码。不知何故，我无法理解为什么会导致错误。你能帮帮我吗？

我的代码：

import  Component, OnInit  from '@angular/core';
import ProductService from '../../services/product.service';

@Component(
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
)
export class ProductsComponent implements OnInit 

  products: any[] = [];

  constructor(private productService: ProductService)  

  ngOnInit(): void 
   this.productService.getAllProducts().subscribe((prods: count: Number, products: any[]) => 
     this.products = prods.products;
     console.log(this.products);
   );

  

我的错误： my error img

【问题讨论】：

您的getAllProducts 方法是什么样的？它似乎有不同的返回类型

getAllProducts(numberOfResults = 10) return this.http.get(this.SERVER_URL + '/products', params: limit: numberOfResults.toString() );

如果你把它转换成this.http.get<count: Number, products: any[]>(this.SERVER_URL..会发生什么

在 getallproduct 中还是在订阅中？

在您的 getAllProducts 方法中，http.get 行

【参考方案1】：

你应该输入你的http.get 方法

getAllProducts(numberOfResults = 10)  
  return this.http.get<count: Number, products: any[]>(this.SERVER_URL + '/products',  params:  limit: numberOfResults.toString()  ); 
 

【参考方案2】：

export class ProductsComponent implements OnInit 
  products: any[] = [];
  constructor(private productService: ProductService)  
  ngOnInit(): void 
   this.productService.getAllProducts().subscribe((prods: IPerson) => 
     this.products = prods.products;
   );
  

interface IPerson
  count:number,
  products:any[]

服务：

getAllProducts()
  return this http.get(`url`);

但最好使用以下方法：

export class ProductsComponent implements OnInit 
  products: any[] = [];
  constructor(private productService: ProductService)  
  ngOnInit(): void 
   this.productService.getAllProducts().subscribe(prods=> 
     this.products = prods.products;
   );
  

export interface IPerson
  count:number,
  products:any[]

服务：

getAllProducts():Observble<IPerson>
  return this http.get<IPerson>(`url`);

【讨论】：

感谢您的评论。我试过了，但不幸的是这段代码不适用于我的应用程序。