Angular2将嵌套的json数组映射到模型

Question

我无法将嵌套的json数组映射到Angular2中的Web模型数组。 假设我有json数组响应如下：

[{
    "base_url": "http://mysearch.net:8080/",
    "date": "2016-11-09",
    "lname": "MY PROJ",
    "name": "HELLO",
    "description": "The Test Project",
    "id": 10886789,
    "creationDate": null,
    "version": "2.9",
    "metrics": [{
        "val": 11926.0,
        "frmt_val": "11,926",
        "key": "lines"
    },
    {
        "val": 7893.0,
        "frmt_val": "7,893",
        "key": "ncloc"
    }],
    "key": "FFDFGDGDG"
}]

我试图手动映射字段引用链接Angular 2 observable没有“映射”到我的模型的模型，并能够通过迭代ngFor来显示我的HTML中的那些......但我想也显示ncloc和行值也在HTML中，但我不知道如何将这些值映射到我的模型数组，如上面链接中所述。 你能帮我解决这个问题吗？

谢谢。

编辑

模式类

export class DeiInstance { 
    base_url: string;
    date: string;
    lname : string;
    name : string;
    id : number;
    key:string;

    constructor(obj: DeiInstance) {
        this.sonar_url = obj['base_url'];
        this.lname = obj['lname'];
        this.name = obj['name'];
        this.id = obj['id'];
        this.key = obj['key'];
        this.date = obj['date'];
    } 

    // New static method. 
    static fromJSONArray(array: Array<DeiInstance>): DeiInstance[] {
        return array.map(obj => new DeiInstance(obj));
    } 
 } 

Answer 1

您可以大量简化模型和映射。 您无需手动映射API响应。 JavaScript / TypeScript可以为您完成此任务。

首先，您需要多个接口。

export interface DeiInstance { 
    base_url: string;
    date: string;
    lname: string;
    name: string;
    description: string;
    id: number;
    creationDate: string; //probably date
    version: string
    metrics: Metric[];
    key: string;
 }

 export interface Metric {
      val: decimal;
      frmt_val: decimal;
      key: string;
 }

然后，您可以使用TypeScript的as - “运算符”将API响应转换为DeiInstance类型。

 sealSearch(term: string): Observable<DeiInstance[]> {
      return this.http.get(this.sealUrl + term)
           .map(response => response.json() as DeiInstance[])
           .catch(this.handleError);
 }

如果您使用接口而不是类，那么您还可以获得更少的生产代码，这些代码将被发送到客户端浏览器。 接口仅用于预编译时或者您想要调用它。

希望我的代码能够运行并解决您的问题。