如何在Angular中使用JSON資料？

我在使用 json 和 angular 時遇到了一些問題。

在我的專案中，我生成組件。

我洗掉了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;

問題在這里..

對它的粗暴

更新 1

我有 tsconfig.json

"resolveJsonModule": true,
"esModuleInterop": true

其他方式問題 ss

SS

問候

uj5u.com熱心網友回復：

您在prod.data.json. 您將數字存盤為string.

以這種方式設定它們：

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

uj5u.com熱心網友回復：

那是因為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;
  }

}

標籤：css json 有角的

上一篇：使div框成為錨點-如何保持div框的屬性

下一篇：可以避免多個媒體查詢的CSS代碼冗余嗎？