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

我无法将作为Web响应的嵌套json数组映射到Angular2中的模型数组。假设我有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"
}]

我试图手动将引用链接的字段映射到我的模型，并能够通过迭代ngFor在我的HTML中显示这些字段……但我也想在HTML中显示ncloc和lines值，但我不确定如何将这些值映射到我的模型数组，如上面链接中所述。 你能帮我做这个吗

谢谢

编辑

模式类

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));
    } 
 } 

导出类实例{
基本url：字符串；
日期：字符串；
lname：字符串；
名称：字符串；
id：编号；
键：字符串；
构造函数（对象：实例）{
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']；
} 
//新的静态方法。
静态fromJSONArray（数组：array）：deInstance[]{
返回array.map（obj=>newdeinstance（obj））；
} 
} 

您可以大大简化模型和映射。 您不需要手动映射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;
 }

然后，您可以使用

as

-TypeScript的“操作符”将API响应转换为实例类型

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

sealSearch（术语：字符串）：可观察{
返回this.http.get（this.sealUrl+term）
.map（response=>response.json（）作为实例[]）
.接住（这个.把手错误）；
}

如果您使用接口而不是类，您还有一个优势，即将发送到客户端浏览器的生产代码更少。 该接口仅在预编译时存在，或者您希望如何调用它

---

希望我的代码能起作用，它能解决您的问题。

您有更多当前映射和当前模型的代码吗？这是我的模型：导出类DeiInstance{base\u url:string；date:string；lname:string；name:string；id:number；key:string；构造函数（obj:DeiInstance）{this.sonar\u url=obj['base\u 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）：deInstance[]{return array.map（obj=>New deInstance（obj））；}@M4R1KU和我正在迭代组件中定义为DeiInstance[]的ListProject，以显示我的HTMLI中的字段。假设您从后端API获取数据，那么您可以在组件类中添加TypeScript服务类和基本部分。sealSearch（术语：string）：Observable{返回this.http.get（this.sealUrl+term）.map（res=>deinstance.fromJSONArray（res.json（））.catch（this.handleError）；}这是服务非常感谢@M4R1KU。这对我有用。如果我有更多的疑问或者我再坚持下去，我会向你求助。非常感谢@RoshDesh很高兴听到这个。如果您能将我的回答标记为yozr问题的解决方案，我也将不胜感激；D