Angular json转换为对象实例答案

【问题标题】：Angular json convert to instance of objectAngular json转换为对象实例
【发布时间】：2018-02-17 18:02:04
【问题描述】：

我有一个应用程序，我想在其中将 json 转换为 Angular 中的数组。映射正确完成，但是，我的数据不是我的对象的实例，因此，我在该类中创建的任何方法/函数都不能被调用。这是我正在使用的代码

export class Armor {
name: string;
listOfUpgradeMaterials: Material[];

get externalLink(): string {
    return this.name.replace(" ", "_");
}

这就是我的转换方式

 // result is a Json value with a array of armor
 var list = <Armor[]>result;
 console.log(list[0].externalLink); //does not work
 console.log(list[0].name);//works

我尝试使用自定义地图，但如果这样做，我的子属性“材料”不会被实例化，因此它也不起作用

this.list = _.map(this.list).map(function (x) {
let armor: Armor = Object.assign(new Armor, x);
return armor;
});

即使使用多个级别的对象，解决此问题的整体解决方案是什么？

谢谢

【问题讨论】：

您是否尝试过使用此关键字，例如：this.list[0].externalLink
console.log(result.json()); 的输出是什么？尚不清楚result 来自哪里。
list[0] 是具有name 属性的对象吗？我不完全确定类型断言是如何工作的，但我希望list.externalLink 可以工作，但list[0].externalLink 不能工作，因为后者是一个不同的对象而不是Armor 对象。如果是这种情况，那么如果您将name: string; 替换为banana: string;，我希望list[0].banana 会以与externalLink 相同的方式失败。

标签： angular typescript

【解决方案1】：

您需要使用 new 运算符来实例化类以使用 getters/setters/methods。我建议在构造函数中定义字段，例如：

export class Armor {
  constructor(public name: string,
              public listOfUpgradeMaterials: Material[]){}

  get externalLink(): string {
      return this.name.replace(" ", "_");
  }
}

您可以使用下一个代码进行实例化：

...
this.list = result.map( item => {
  const { name, listOfUpgradeMaterials } = item;
  const materials = listOfUpgradeMaterials.map(material => new Material(material));

  return new Armor(name, materials);
} )
...

2) 或者另一种方式 - 您可以使用 Object.assign，但适用于 Armor 和 Material 对象

...
function instantiate(item, clazz){
  return Object.assign(new clazz(), item);
}
...
this.list = result.map( item => {
  item.listOfUpgradeMaterials = item.listOfUpgradeMaterials
    .map(material => instantiate(material, Material));
  return instantiate(item, Armor);
} )
...

3) 此外，如果您不想分离 new Armor(name, materials, ...) 等所有属性，您可以在构造函数中分配字段并将对象转移到那里

export class Armor {
  public name: string,
  public listOfUpgradeMaterials: Material[]

  constructor(armor: Armor){
    Object.assign(this, armor);
  }

  get externalLink(): string {
      return this.name.replace(" ", "_");
  }
}

之后您可以使用new Armor(armorJSON) 实例化（但您还需要实例化 Material 和 Armor 对象）

【讨论】：