如何将JSON响应映射到Angular 4中的模型

我已经尝试了很多，但我无法将端点响应映射到我的模型。我正在使用HttpClient和Angular4。 我从服务中获得了数据，但它没有正确映射到我的模型类

我有以下服务返回的JSON：

{
    "result": [
        {
            "id": "1",
            "type": "User",
            "contactinfo": {
                "zipcode": 1111,
                "name": "username"
            }
        }
    ]
}

我已经在typescript中创建了一个模型，我想将其映射到json响应：

export interface result {
            zipcode: number;
            name: string;
}

这就是我如何调用JSON端点的方法

result : string[] = [];

constructor(private http: HttpClient) {    }

public getList(): result[] {
        this.http.get<result[]>('url...', { headers: this.headers }).subscribe(

            data => {
             // 1. Data is returned - Working
                console.log('data: ' + data); 
                this.result= data;

                // This is the problem. My data is not mapped to my model. If I do following a null is returned
                console.log('data mapped: ' + this.result[0].name);
            },
            (err: HttpErrorResponse) => {
    // log error
            }
        );

        return this.result;
    }

结果：字符串[]=[]；
构造函数（私有http:HttpClient）{}
public getList（）：结果[]{
this.http.get（'url…'，{headers:this.headers}）.subscribe(
数据=>{
//1.返回数据-正在工作
console.log（'数据：'+数据）；
结果=数据；
//这就是问题所在。我的数据没有映射到我的模型。如果我这样做，则返回null
console.log（'数据映射：'+this.result[0].name）；
},
（错误：HttpErrorResponse）=>{
//日志错误
}
);
返回此结果；
}

您需要在组件中导入接口

import { result } from '.result';

您的界面应该如下所示：

interface RootObject {
  result: Result[];
}

interface Result {
  id: string;
  type: string;
  contactinfo: Contactinfo;
}

interface Contactinfo {
  zipcode: number;
  name: string;
}

并将结果类型更改为

result : result;

this.result = data;

并将结果指定为

result : result;

this.result = data;

您可以使用创建基于JSON的接口，您的“数据”是一个对象，具有属性“result”。结果[]具有名为“contactInfo”的属性。在contactInfo中，您拥有所需的数据，因此

//you have no model, so NOT get<result[]>
this.http.get('url...', { headers: this.headers }).subscribe(
            data => {
                this.result= data.result[0].contactInfo;
            }

//您没有模型，因此无法获取
this.http.get（'url…'，{headers:this.headers}）.subscribe(
数据=>{
this.result=data.result[0].contactInfo；
}

您的界面错误。缺少的属性

id、type、contact info

在哪里？我只需要zipcode和name，这就是为什么我创建了一个只包含这些字段的界面。界面应该包含JSON中存在的所有字段吗？我尝试了您的输入，但data.result.contact信息出现错误。data.result.contact信息不存在finded@user2480218，抱歉，我更新了我的答案，结果是一个数组。无论如何，请检查console.log（data）数据的值。当我删除get时，我无法使它工作。这导致了未定义。抱歉，再次是data.result[0]。contactinfo。我只是探测。但这不是魔术。你只需要创建一个console.log（data），console.log（data.result），console.log（data.result[0]）和console.log（data.result[0]）contactinfo来查看您的数据名问题。data.result.contactinfo未索引。现在它正在工作。它确实帮助我从jsontots.com创建了模型。修复它的代码是：this.http.get（url，{headers:myheaders}）。subscribe（data=>{console.log（'data:'+JSON.stringify（data.Result[0].contactInfo.name））；}在这种情况下，是否有理由使用接口而不是类？