时间戳

首页 > 解决方案 > Angular - 创建新接口时无法编译，出现不可分配的错误

angular - Angular - 创建新接口时无法编译，出现不可分配的错误

问题描述

我正在创建一个简单的新界面并得到一个编译错误，任何建议我在这里做错了什么

这是我的错误：

C:/Users/vashon/Angular/Angular-GettingStarted-master/APM/src/app/products/product-list.component.ts (16,2): Type '{ "productId": number; “产品名称”：字符串；“产品代码”：字符串；“发布日期”：字符串；"desc..." 不能分配给类型 'IProduct[]'。类型 '{ "productId": number; "productName": string; "productCode": string; "releaseDate": string; "desc..."不可分配给类型“IProduct”。属性“releaseDate”的类型不兼容。类型“字符串”不可分配给类型“日期”。

我的 product.ts 界面

export interface IProduct {

 productId: number;
 productName: string;
 productCode: string;
 releaseDate: string;
 description: string;
 price: number;
 starRating: number;
 imageUrl: string;
}

我的 product-list.component.ts

import { Component } from '@angular/core';
import { IProduct } from './product';

@Component ({
    selector: 'pm-products',
    templateUrl: './product-list.component.html'    
}
)

export class ProductListComponent {
    pageTitle: string = 'Product List';
    imageWidth: number = 50;
    imageMargin: number = 2;
    showImage: boolean = false;
    listFilter: string = 'carts';
    products: IProduct[] = [
    {
        "productId": 1,
        "productName": "Leaf Rake",
        "productCode": "GDN-0011",
        "releaseDate": "March 19, 2016",
        "description": "Leaf rake with 48-inch wooden handle.",
        "price": 19.95,
        "starRating": 3.2,
        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
    },
    {
        "productId": 2,
        "productName": "Garden Cart",
        "productCode": "GDN-0023",
        "releaseDate": "March 18, 2016",
        "description": "15 gallon capacity rolling garden cart",
        "price": 32.99,
        "starRating": 4.2,
        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
    }];

    toggleImage() : void {
        this.showImage = !this.showImage;
    }
}

标签： angular

解决方案

确保所有属性类型都与接口与 JSON 匹配。当一切都正确时，您仍然会在编译期间看到特定于接口类型匹配问题的错误。只需重新启动 VSCode 即可正常工作。

推荐阅读