Angular：如何将来自 HttpClient 请求的 JSON 结果映射到类实例？

Posted 2023-03-13

【中文标题】Angular：如何将来自 HttpClient 请求的 JSON 结果映射到类实例？

【英文标题】：Angular: How to map JSON result from HttpClient request to class instances?

【发布时间】：2018-03-21 03:27:53

【问题描述】：

我有以下似乎错误的代码：

public search(searchString: string): Observable<Array<ClientSearchResult>> 
    let params = new HttpParams().set('searchString', searchString);

    return this.http
        .get<Array<ClientSearchResult>>(this.searchUrl,  params: params )
        .map((results: ClientSearchResult[]) => results.map((r: ClientSearchResult) => new ClientSearchResult(r)));

我知道 API 返回的 JSON 对象与我的 TypeScript 类的实例不同。但是，我想使用 TypeScript 类中定义的属性。

有没有更好的方法将来自我的 API 调用的数组映射到实际上包含 ClientSearchResult 实例的数组？

这里是ClientSearchResult 对象：

import  Name  from './name';

export class ClientSearchResult 
    public id: string;
    public name: Name;
    public dateOfBirth: Date;
    public socialSecurityNumber: string;

    public get summary(): string 
        let result: string = `$this.name`;

        if (this.dateOfBirth)
            result += ` | $this.dateOfBirth.toLocaleDateString()`;

        return result;
    

    constructor(source: ClientSearchResult) 
        this.id = source.id;
        this.name = new Name(source.name);
        this.dateOfBirth = source.dateOfBirth? new Date(source.dateOfBirth) : undefined;
        this.socialSecurityNumber = source.socialSecurityNumber;
    

    public toString(): string 
        return this.summary;
    

【问题讨论】：

如果您不想手动设置许多属性，可以使用Object.assign(new ClientSearchResult(), decodedJsonObject)，但仅此而已。

你能告诉我们，ClientSearchResult 的构造函数吗？也许“new ClientSearchResult(r)”不是将转换应用于 ClientSearchResult 实例的方法。

@Luillyfe 我已经更新了问题。

【参考方案1】：

我们使用了一个很棒的库来将 json 映射到 typescript 对象。 https://github.com/shakilsiraj/json-object-mapper

json-object-mapper 依赖于 reflect-metadata 库，因为它使用装饰器来序列化和反序列化数据。

【参考方案2】：

作为一个选项，您可以尝试使用 TypeScript as 运算符将您的 API 响应转换为 ClientSearchResult 类型。

import  Http, Response  from '@angular/http';

public search(searchString: string): Observable<ClientSearchResult[]> 
    const params = new HttpParams().set('searchString', searchString);
    return this.http.get(this.searchUrl,  params: params )
        .map((results: Response) => results.json() as ClientSearchResult[]);

这种方法要求你的模型类被用作一个接口，或者只是一个接口：

interface ClientSearchResult 
  id: number;
  // etc

【讨论】：

感谢您的建议。但是，我正在尝试使用新的HttpClient 而不是Http。 HttpClient 给了我一个类型化的数组，而不是 Response。我会研究 as 运算符，看看我能不能用它做任何事情。

【参考方案3】：

我一直在使用这个非常好的（并且在发布时是最新的）库：

https://www.npmjs.com/package/class-transformer

它可以处理嵌套类等非常复杂的情况。