时间戳

首页 > 解决方案 > 错误 TS2322：未定义的'不可分配给类型'产品'

angularjs - 错误 TS2322：未定义的'不可分配给类型'产品'

问题描述

这是我的 service.ts 文件，getProductById 方法属于该文件并给出错误。

import { Inject, Injectable } from '@angular/core';
import { inject } from '@angular/core/testing';

@Injectable({
  providedIn: 'root'
})

export class ProductService {

  constructor() { }
  getProducts(): Product[] {
    return products.map(p =>new Product(p.id, p.title, p.price, p.rating, p.description, p.categories));
  }

  getProductById(productId: number): Product{
    return products.find(p => p.id === productId);
  }
}

export class Product{
  constructor(
     public id: number,
     public title: string,
     public price: number,
     public rating: number,
     public description: string,
     public categories: string[]){}
}


export class Review {
  constructor(
    public id: number,
    public productId: number,
    public timestamp: Date,
    public user: string,
    public rating: number,
    public comment: string) {
  }
}


const products =[
  {
    'id': 0,
    'title': 'First product',
    'price': 24.99,
    'rating': 4.3,
    'description': 'This is a short description for product Zeroth',
    'categories': ['electronics', 'hardware']
  },
  
  {
    'id': 1,
    'title': 'Second Product',
    'price': 64.99,
    'rating': 3.5,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['books']
  },

  {
    'id': 2,
    'title': 'Third Product',
    'price': 74.99,
    'rating': 4.2,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['electronics']
  },

  {
    'id': 3,
    'title': 'Fourth Product',
    'price': 84.99,
    'rating': 3.9,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['hardware']
  },

  {
    'id': 4,
    'title': 'Fifth Product',
    'price': 94.99,
    'rating': 5,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['electronics', 'hardware']
  },

  {
    'id': 5,
    'title': 'Sixth Product',
    'price': 54.99,
    'rating': 4.6,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['books']
  }
]

这个是 product-detail.component 我想通过 Id 获取详细信息

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product, ProductService} from '../shared/product.service';

@Component({
  selector: 'nga-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  public product!: Product;

  constructor(private route: ActivatedRoute,
    private productService: ProductService) { }

  ngOnInit(): void {
    const prodId: number = parseInt(this.route.snapshot.params['productId']);
    this.product = this.productService.getProductById(prodId);
  }

}

错误信息：-

错误：src/app/shared/product.service.ts:16:5 - 错误 TS2322：类型 '{ id: number; 标题：字符串；价格：数量；评级：数字；描述：字符串；类别：字符串[]；} | undefined' 不可分配给类型 'Product'。类型“未定义”不可分配给类型“产品”。

16 返回 products.find(p => p.id === productId);

标签： angularjsangularangularjs-directiveangular6angular-cli

解决方案

您必须在getProductById()比上使用相同的签名Array.find()，因为如果不是，您是在告诉 TS 您的函数应该只返回Product值，但它也可以undefined按原样返回find()。所以，完成你的功能，如：

getProductById(productId: number): Product | undefined {
    return products.find(p => p.id === productId);
  }

或者简单地删除返回类型并让 TS 推断它：

getProductById(productId: number): {
    return products.find(p => p.id === productId);
  }

推荐阅读