Angular TypeScript中如何将JSON数组转为自定义Roles类数组

嘿，这事儿其实挺简单的，我给你两种实用的实现方式，你可以根据场景灵活选：

1. 先完善你的Roles类（推荐带构造函数） #

首先把Roles类的定义捋顺，加个构造函数会让初始化更顺手，另外注意TypeScript里布尔类型建议用小写的boolean（大写Boolean是包装对象，一般不用在类型定义里）：

class Roles {
  ID: number;
  Role: string;
  Checked: boolean;

  // 构造函数，默认把Checked设为false，也可以自定义默认值
  constructor(id: number, role: string, checked: boolean = false) {
    this.ID = id;
    this.Role = role;
    this.Checked = checked;
  }
}

2. 用Array.map()完成转换 #

方法一：通过构造函数创建实例（类型最安全） #

这种方式适合以后Roles类可能添加业务方法或逻辑的场景，直接调用构造函数生成类实例：

// 你的原始JSON数组
const rawRolesData = [{"id":1,"role":"Admin"},{"id":2,"role":"Manager"},{"id":3,"role":"User"}];

// 转换为Roles数组
const rolesArray: Roles[] = rawRolesData.map(item => 
  new Roles(item.id, item.role)
);

如果需要根据条件设置Checked的值（比如默认让Admin选中），可以这样调整：

const rolesArray: Roles[] = rawRolesData.map(item => 
  new Roles(item.id, item.role, item.role === 'Admin')
);

方法二：对象字面量+类型断言（快速简洁） #

如果你的Roles类只是纯数据结构，没有额外方法，也可以直接用对象字面量创建，再通过类型断言告诉TypeScript这是Roles类型：

const rolesArray: Roles[] = rawRolesData.map(item => ({
  ID: item.id,
  Role: item.role,
  Checked: false // 这里设置默认选中状态
}) as Roles);

这样就能轻松把JSON数组转换成你需要的Roles类数组啦～

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