如何在 Angular 中使用 JSON 数据？答案

【问题标题】：How can I use JSON data with Angular?如何在 Angular 中使用 JSON 数据？
【发布时间】：2021-12-09 11:07:01
【问题描述】：

我在使用带角度的 json 时遇到了一些问题。

在我的项目中，我生成组件。

然后我删除了 spec.ts。

之后我创建了一个名为 prod.data.json 的文件

{
    "products" :
        [
            {
                "sku" : "10",
                "name" : "Laptop Blue Background",
                "saleTag" : false,
                "prodImage" : "img",
                "price" : "210",
                "discountly" : "200",
                "revives" : "3",
                "summary" : "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only",
                "availability" : "In Stock",
                "categori" : "Business",
                "tag" : "Book",
                "share" : {
                        "facebook" : "link",
                        "twitter" : "link",
                        "instagram" : "link",
                        "linkedin" : "link"
                },

json代码格式是这样的。

而 content.companents.ts 命名的文件代码是..

import prodData from '/Users/obasekin/angular-crash/src/app/prod.data.json';
interface Product {
  sku: Number;
  name: String;
  saleTag: String;
  prodImage: String;
  price: Number;
  discountly: Number;
  revives: Number;
  summary: String;
  availability: String;
  catagori: String;
  tag: String;
  share: {
    facebook: String;
    twitter: String;
    instagram: String;
    linkedin: String;
  };
  description: {
    desSummary: String;
    desList: {
      lineMono: String;
      lineDi: String;
      lineTri: String;
      lineTetra: String;
      linePenta: String;
      lineHexa: String;
    };
  };
}

我导入的格式是字符串或数字。

我的问题出在这段代码中..

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  products: Product[] = prodData;
  
  ngOnInit(): void {
  }

}

产品在这行有问题

products: Product[] = prodData;

在这里发出 ss..

cruser on it

更新 1

我有 tsconfig.json

"resolveJsonModule": true,
"esModuleInterop": true

其他方式问题ss

问候

【问题讨论】：

对不起，我忘记提了。我在 tsconfig.json: "resolveJsonModule": true, "esModuleInterop": true
试试products: Product[] = prodData.products;
我试了还是一样

标签： css json angular

【解决方案1】：

您在prod.data.json 中设置了错误的值。您将号码存储为string。

这样设置：

{
  "products": [
    {
      "sku" : 10,
      "name" : "Laptop Blue Background",
      "saleTag" : false,
      "prodImage" : "img",
      "price" : 210,
      "discountly" : 200,
      "revives" : 3,
...

【讨论】：

【解决方案2】：

那是因为prodData 不是数组；它是一个包含products 数组的对象。

将包装对象添加到您的界面：

export interface Inventory {
  products: Product[];
}

export interface Product {
  ...
}

然后在你的课堂上：

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  inventory: Invertory = prodData;
  
  ngOnInit(): void {
  }

  get products(): Product[] {
    return this.inventory.products;
  }

}

【讨论】：

现在它显示“找不到名称'Invertory'.ts(2304)”
可能是导入/导出问题，导出接口（参见我的编辑），然后在您的ContentComponent 中使用import 语句（即import { Inventory, Product } from 'src/app/model/model.ts';）
你的意思是我应该在哪里导入“import { Inventory, Product } from 'src/app/model/model.ts';”我的意思是在哪个文件中，我没有 model/model.ts
无论你有什么文件

【解决方案3】：

我创建了一个新文件，名为：

content.interface.ts

在这里：

export interface IProduct {
    sku: Number;
    name: String;
    saleTag: boolean;
    prodImage: String;
    price: Number;
    discountly: Number;
  }

也在：

content.components.ts

同时导入它们及其路径

import prodData from '../(what was ur json file name).json';

import {IProduct} from './content.interface'

我这样导出：

export class ContentComponent implements OnInit {
      products: IProduct[] = prodData.products;
}

现在一切正常..

【讨论】：