Angular中JSON数组转对象集合失败，请求正确转换方法

我来帮你搞定这个问题！你遇到的核心问题主要有两个：JSON数据的属性名和你的Product类属性名不匹配，以及单纯的类型断言并没有真正完成对象的结构适配，另外JSON的导入方式也需要小调整下。

问题根源拆解 #

你的products.json里的属性都是小写开头的（id、name、relatedProducts），但Product类里定义的是大写开头的（Id、Name、RelatedProducts），而且模板里用的也是p.Id、p.Name——运行时这些属性在JSON对象上根本不存在，所以模板自然显示不出内容；另外直接用<Product[]>this.productsJson只是编译时的类型断言，并没有改变实际对象的结构。

具体修复步骤 #

1. 统一属性命名（推荐方案）

把Product类的属性改成和JSON一致的小写风格，更符合JS/TS的编码惯例：

// product.ts
export class Product {
  id: number;
  name: string;
  description: string;
  relatedProducts: Array<number>;
}

2. 调整JSON导入与转换逻辑

首先确保你的tsconfig.json里开启了JSON模块解析（如果没开的话，导入JSON会报错）：

// tsconfig.json
{
  "compilerOptions": {
    // 其他配置...
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

然后修改app.component.ts的导入和转换代码：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product';
// 直接导入JSON数组，不需要用* as
import productsJson from '../../json-data/products.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  products: Array<Product> = [];

  ngOnInit() {
    // 如果Product类只是纯数据类（没有方法），用类型断言足够
    this.products = productsJson as Product[];
    
    // 要是你的Product类有自定义方法，需要手动转换成类实例：
    // this.products = productsJson.map(item => {
    //   const product = new Product();
    //   product.id = item.id;
    //   product.name = item.name;
    //   product.description = item.description;
    //   product.relatedProducts = item.relatedProducts;
    //   return product;
    // });
    
    console.log(this.products);
  }
}

3. 修改模板中的属性引用

把模板里的属性改成小写，和调整后的Product类匹配：

<!-- app.component.html -->
<ul>
  <li *ngFor="let p of products">
    {{p.id}} {{p.name}}
  </li>
</ul>

为什么这样能解决问题？ #

现在JSON的属性名和Product类、模板里的引用完全一致了，Angular的*ngFor就能正确遍历数组并读取每个对象的属性，页面就能正常显示内容啦。

内容的提问来源于stack exchange，提问作者Citrus