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

【问题标题】：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 行

标签： node.js arrays angular node-modules

【解决方案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`);
}

【讨论】：

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