Angular 4中JSON列表赋值TypeScript Interface报错解决

这个错误提示确实有点让人困惑——明明你的IProduct接口里明确定义了productId，但TypeScript却声称这个属性不存在。我们一步步来排查解决：

最可能的根源：接口导入/路径问题 #

TypeScript找不到正确的IProduct接口定义，所以无法识别你对象里的属性。你可以从这几点入手检查：

• 文件名大小写匹配：如果你的接口文件实际是products.ts（小写p），但导入语句写的是import { IProduct } from './Products';（大写P），在Linux/macOS这类区分大小写的系统上，TS会找不到对应文件。确保文件名和导入路径的大小写完全一致。
• 文件路径正确性：确认Products.ts和你的ProductListComponent.ts在同一个目录下。如果接口文件在子文件夹（比如./models/Products.ts），那导入路径要改成./models/Products。
• 接口导出是否有效：再核对一遍Products.ts里的接口定义，确保export关键字没有遗漏：

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

其次检查属性拼写一致性 #

虽然你的代码看起来拼写没问题，但还是要仔细核对：

• 接口里的productId（小写d）和组件对象里的"productId"完全一致，没有写成ProductId或productid。
• 所有属性名（比如description、starRating）都要和接口定义一一对应，不能有拼写失误。

清理缓存并重新编译 #

有时候Angular的缓存会导致TS无法识别最新的接口定义，试试以下操作：

1. 停止运行中的ng serve
2. 执行ng clean清理项目缓存
3. 重新启动项目：ng serve

临时排查：在组件内直接定义接口 #

如果上面的方法都没解决问题，你可以尝试在ProductListComponent.ts里直接定义IProduct接口，删掉原来的导入语句，看看错误是否消失：

import { Component } from '@angular/core';

// 直接在组件内定义接口
interface IProduct{
  productId: number;
  productName: string;
  productCode: string;
  releaseDate: string;
  description: string;
  price:number;
  starRating: number;
  imageUrl: string;
}

@Component({
  selector: 'pm-product',
  templateUrl: './Product-List.Component.html',
  styleUrls: ['./Product-list.component.css']
})
export class ProductListComponent {
  PageTitle: string = "Product List";
  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" },
    { "productId": 5, "productName": "Hammer", "productCode": "TBX-0048", "releaseDate": "May 21, 2016", "description": "Curved claw steel hammer", "price": 8.9, "starRating": 4.8, "imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png" },
    { "productId": 8, "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" },
    { "productId": 10, "productName": "Video Game Controller", "productCode": "GMG-0042", "releaseDate": "October 15, 2015", "description": "Standard two-button video game controller", "price": 35.95, "starRating": 4.6, "imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png" }
  ];
}

如果这样错误消失了，说明问题肯定出在接口的导入环节，再回头仔细检查路径和导出配置即可。

内容的提问来源于stack exchange，提问作者K.Z