时间戳

首页 > 解决方案 > 在将 JSON 分配给类对象后，该类的本地函数已损坏

javascript - 在将 JSON 分配给类对象后，该类的本地函数已损坏

问题描述

这是我的班级对象书是父母并且有一个孩子

export class Book
{
  name: String;
  auther: String;
  series: String;

  pricedeatils: Array<price>;

}

// 这是子类

export class price
{
    price1: Number; 
    price2: Number;
    price3: Number;
    price4: Number;
    price5: Number;
    price6: Number;
    price7: Number; 
    public setPrice( lcol:number,lnprice:number)
    {     
            this["price"+ lcol]=  lnprice:  
    }   
}

我通过 api 接收

this.http.get(this.booksUrl)
  .subscribe(res => console.log(res));

我的 json 文件看起来像这样

{
    "name": "Apple",
    "auther": "Shaik",
    "series": "Classic"

    "pricedeatils": [

                    {
                        "price1": 1, 
                        "price2": 2, 
                        "price3": 3, 
                        "price4": 4, 
                        "price5": 7, 
                        "price6": 10, 
                        "price7": 8, 
                      },
                      {
                        "price1": 11, 
                        "price2": 22, 
                        "price3": 23, 
                        "price4": 34, 
                        "price5": 37, 
                        "price6": 10, 
                        "price7": 38, 
                      }, 
                      {
                        "price1": 31, 
                        "price2": 33, 
                        "price3": 24, 
                        "price4": 34, 
                        "price5": 37, 
                        "price6": 10, 
                        "price7": 38, 
                      },


                ],
}

收到 json 后，我无法调用类本地函数。

this.Book.pricedeatils[0].setobj(1, 15)

出现这样的错误 core.js:12301 ERROR 错误：未捕获（在承诺中）：TypeError：this.Book.priceeutils[0].setobj is not a function

标签： javascripttypescript

解决方案

您从服务器收到的 JSON 使用JSON.parse方法转换为对象。JSON.parse 的输出始终是数组、对象、数字或字符串（直到未使用reviver 参数）。它不是您的类的实例Book或price.

我过去也遇到过同样的问题，我通过为我的类创建一个复制构造函数并将从服务器接收到的值传递给它来解决它，如下所示

export class price
{
    constructor(source: price){
      this.price1 = source.price1;
      this.price2 = source.price2;
      this.price3 = source.price3;
      this.price4 = source.price4;
      this.price5 = source.price5;
      this.price6 = source.price6;
      this.price7 = source.price7;
    }
    price1: Number; 
    price2: Number;
    price3: Number;
    price4: Number;
    price5: Number;
    price6: Number;
    price7: Number; 
    public setPrice( lcol:number,lnprice:number)
    {     
        this["price"+ lcol]=  lnprice:  
    }
}

和

export class Book
{
    constructor(source: price){
      this.name= source.name;
      this.auther= source.auther;
      this.series= source.series;
      this.pricedeatils= source.pricedeatils && source.pricedeatils.map(a=>new price(a));
    }
  name: String;
  auther: String;
  series: String;

  pricedeatils: Array<price>;

}

并将其用作

this.http.get(this.booksUrl).pipe(map(a => new Book(a))).subscribe(res => console.log(res));

推荐阅读