类型中不存在变量

Question

尝试在ngOnInit函数中填充 Product 数据类型的数组以进行测试，如下所示：

import { Component, OnInit } from '@angular/core';
import {IProduct} from "../product-list/product";
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product-detiail',
templateUrl: './product-detiail.component.html',
styleUrls: ['./product-detiail.component.css']
})
export class ProductDetiailComponent implements OnInit {
pageTitle = "Product Detail";
product: IProduct[];
constructor(private route: ActivatedRoute) { 
}
ngOnInit() {
let id = +this.route.snapshot.paramMap.get('id');
this.pageTitle = `:${id}`;
this.product = {
"productId": 10,
"productName": "Saw",
"productCode": "TBX-0022",
"releaseDate": "May 15, 2016",
"description": "15-inch steel blade hand saw",
"price": 11.55,
"starRating": 3.7,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
};
}
}

我有一个界面中指定的IProduct数据类型，可以在这里看到：

export interface IProduct{
productId: number;
productName: string;
productCode: string;
releaseDate: string;
price: number;
description: string;
starRating: number;
imageUrl: string; 
}

可以看出，ngOnInit中给出的接口和数据匹配，但是当代码编译时，我遇到了此错误：

ERROR in src/app/components/product-detail/product-detiail.component.ts(24,7): error TS2322: Type '{ "productId": number; "productName": string; "productCode": string; "releaseDate": string; "description": string; "price": number; "starRating": number; "imageUrl": string; }' is not assignable to type 'IProduct[]'.
Object literal may only specify known properties, and '"productId"' does not exist in type 'IProduct[]'.

我很困惑为什么会这样？我错过了什么？任何帮助将不胜感激，谢谢。

Answer 1

将product: IProduct[]更改为product: IProduct

您已将product定义为 IProduct ->IProduct[]数组，并为其分配了IProduct类型的单个对象。因此，您收到此错误。

要在类型IProduct[]中分配产品，请执行以下操作：

product: IProduct[] = [
{
"productId": 10,
"productName": "Saw",
"productCode": "TBX-0022",
"releaseDate": "May 15, 2016",
"description": "15-inch steel blade hand saw",
"price": 11.55,
"starRating": 3.7,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
}
]

或

product : IProduct[]= []

product.push(
{
"productId": 10,
"productName": "Saw",
"productCode": "TBX-0022",
"releaseDate": "May 15, 2016",
"description": "15-inch steel blade hand saw",
"price": 11.55,
"starRating": 3.7,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
}
)