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

Question

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

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 class 的实例不同。但是，我想使用 TypeScript class.

中定义的属性

是否有更好的方法将来自我的 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;
    }
}

Answer 1

作为一个选项，您可以尝试使用 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[]);
}

此方法要求您的模型 class 用作接口，或仅用作接口：

interface ClientSearchResult {
  id: number;
  // etc
}

Answer 2

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

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

Answer 3

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

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

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

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

Angular: How to map JSON result from HttpClient request to class instances?

json

rxjs

typescript

angular

angular-httpclient