Angular 5中如何根据给定JSON创建Heros.ts模型类？

嘿，我来帮你把这个模型类补全！先看看你提供的JSON数据结构，再一步步修正你的代码。

首先，先明确你的JSON结构：

[{ 
  "data": { "name": "adsd0 ", "lastName": "", "isNode": true }, 
  "children": [{ "data": { "name": "", "lastName": "" } }] 
}]

你现有代码的问题在于：data不是string类型，而是一个包含name、lastName、isNode的对象；另外Child类没有定义任何属性，没法匹配JSON里的子节点结构。

方案1：用接口实现（推荐，仅用于类型检查） #

Angular中如果只是用来做JSON数据的类型映射，用接口足够轻量：

// 定义data字段的结构接口
export interface HeroData {
  name: string;
  lastName: string;
  isNode?: boolean; // 设为可选属性，因为子节点的data里没有这个字段
}

// 定义树节点的通用接口，Hero和Child都遵循这个结构
export interface HeroNode {
  data: HeroData;
  children?: HeroNode[]; // 可选，不是所有节点都有子节点
}

// 你的Hero类（或者直接用HeroNode接口即可）
export class Heros implements HeroNode {
  data: HeroData;
  children?: HeroNode[];
}

方案2：用类实现（适合需要添加方法的场景） #

如果你的模型需要包含业务方法，就用类来定义：

// Data类，封装data字段的属性
export class HeroData {
  constructor(
    public name: string,
    public lastName: string,
    public isNode?: boolean // 可选参数
  ) {}
}

// Child类，和Hero结构一致，因为都是树节点
export class Child {
  constructor(
    public data: HeroData,
    public children?: Child[] // 可选子节点
  ) {}
}

// Heros类
export class Heros {
  constructor(
    public data: HeroData,
    public children: Child[]
  ) {}
}

如何使用？ #

如果是接口方案，直接把JSON数据断言成对应类型即可：

const heroJson = [{ "data": { "name": "adsd0 ", "lastName": "", "isNode": true }, "children": [{ "data": { "name": "", "lastName": "" } }] }];
const heros: Heros[] = heroJson as Heros[];

如果是类方案，需要手动实例化对象：

const heros: Heros[] = heroJson.map(item => 
  new Heros(
    new HeroData(item.data.name, item.data.lastName, item.data.isNode),
    item.children.map(child => new Child(new HeroData(child.data.name, child.data.lastName)))
  )
);

小提示：类名Heros建议改成Hero（单数形式），因为单个对象是一个英雄，数组才是Hero[]，这样命名更规范哦！

内容的提问来源于stack exchange，提问作者Anna