Question

我有一个相当标准的服务返回一些JSON。

示例返回正文可以是：

[{ a: 1, b: 2 }]

我想将其映射到以下Typescript类的实例：

export class MyClass {
  a: number;
  b: number;

  get c() : number {
      return this.a + this.b;
  }
}

我错误地认为HttpClient.get会做到这一点，但是当它将它映射到兼容对象时，它们会遗漏该属性。

this.http.get<MyClass[]>('http://www.example.com/endpoint');

有没有办法让Angular自动执行此操作，或者是否需要像这样的手动映射：

.map(data => {
    const results : MyClass[];
    for(const d of data) {
        const mc = new MyClass();
        mc.a = d.a;
        mc.b = d.b;
        results.push(mc);
    }
    return results;
});

它可以正常工作，但编写代码很繁琐，并且可以轻松创建我不希望在代码中使用的依赖项。

Answer 1

1）你可以创建一些像

这样的解析函数

const mapJsonToObject = Type => obj => Object.assign( new Type(), obj );

并像

一样使用它

...
.map( data => mapJsonToObject(MyClass) )
...

2）换句话说，您可以在类构造函数

中分配所有属性

export class MyClass {
  a: number;
  b: number;

  constructor(obj: MyClass) {
    Object.assign( this, obj );
  }

  get c() : number {
      return this.a + this.b;
  }
}

在map中只需创建MyClass

的新实体

...
.map( data => new MyClass( data as MyClass ) )
...

Answer 2

Angular无法访问类似的泛型类型参数。它只是一个编译器注释。在JSON映射的情况下，我倾向于在目标类中编写一个静态解析函数，然后只是map普通对象。

如果不破坏类名和属性，可以使用键迭代自动映射属性到某种程度（仅适用于简单类型而没有太多额外代码）。

如何将JSON映射到具有计算属性的TypeScript对象

2 个答案: