Angular2/4-将toJSON函数添加到打字稿类的正确方法是什么? [英] Angular2/4 - what is the correct way to add a toJSON function to a typescript class?

问题描述

我遵循了此示例中的代码，但是未调用我的toJSON()函数

I followed code from this example but my toJSON() function is not called.

尝试1

export class Template {
  constructor(
  ) {}

  public id: string
  public account_id: string
  public name: string
  public title: string
  public info: string
  public template_items: Array<number>

  public toJSON = function() {
    return {
      attributes: this.template_items
    }
  }
}

尝试2

interface ITemplateSerialized {
  attributes: Array<number>
}

export class Template {
  constructor(
  ) {}

  public id: string
  public account_id: string
  public name: string
  public title: string
  public info: string
  public template_items: Array<number>

  toJSON(): ITemplateSerialized {
    return {
      attributes: this.template_items
    }
  }
}

尝试3

除了toJSON之外，尝试2的代码相同:

Identical code to Attempt 2 except the toJSON is:

  public toJSON = function(): ITemplateSerialized {
    return {
      attributes: this.template_items
    }
  }

创建一些数据...例如:

Create some data...eg:

let t = new Template();
t.name = "Mickey Mouse"
t.template_items = [1,2,3]

console.log(JSON.stringify(t));

在所有情况下，它都不会将template_items更改为属性...我在这里缺少什么?

In all cases it does not change template_items to attributes...what am I missing here?

更新

@estus在评论中提供的小插曲起作用了，所以我决定用Angular进行比较. 在这里并且有效.

The provided plunk by @estus in the comments worked, so I decided to make one in Angular, to compare. Here it is and it works.

当我写问题时，为了使代码易于理解，我将'template_items'做成了一个数字数组.但是在我实际的Angular项目中，它是一个自定义对象的数组. 此处是显示该结构的插件.它也可以.而且另一个在Angular 4.4.6中工作的矮人

When I wrote the question, to make the code simple to understand, I had made 'template_items' an array of numbers. But in my actual Angular project it is an array of custom objects. Here is a plunker showing that structure. It also works. And another plunker working in Angular 4.4.6

但是这个相同的设置在我的Angular项目中不起作用.因此，问题在于万一其他人都可以重现吗?

But this identical setup does not work in my Angular project. So the question stands in case anyone else can reproduce this?

在我的项目中，我从JSON.stringify()返回了一个完全空的对象.

推荐答案

因此，似乎我对toJSON()的工作方式和stringify替换函数的工作方式感到困惑.

So, it seems I was confused between how toJSON() works and how stringify replacer function works.

使用toJSON()，您提供的函数将仅返回您指定的项目.我的印象是它将返回所有属性，并且仅更改您在函数中指定的属性.

With toJSON() the function you supply will ONLY return the items you specify. I was under the impression that it would return all properties and ONLY change the ones you specify in the function.

因此，在我的项目中，首次创建对象时没有template_items，由于这是我的序列化接口指定的ONLY属性，所有其他属性均被删除，因此为空对象.

So in my project there were no template_items at the point the object was first created, and since that was the ONLY property my serialized interface specified all the other properties were being removed, hence an empty object.

因此，解决方案是在函数return语句和序列化接口中指定所有属性:

So, the solution is to specify ALL properties, in both the function return statement and in the serialize interface:

  toJSON(): ITemplateSerialized {
    return {
      id: this.id,
      account_id: this.account_id,
      name: this.name,
      title: this.title,
      info: this.info,
      attributes: this.template_items
    }
  }

export interface ITemplateSerialized {
  id: string,
  account_id: string,
  name: string,
  title: string,
  info: string,
  attributes: Array<TemplateItem>
}

这篇关于Angular2/4-将toJSON函数添加到打字稿类的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！