3

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

我有以下 JSON 服务正在返回：

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

我在打字稿中创建了一个模型，我想将其映射到 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;
    }
4

2 回答 2

12

您需要在组件中导入接口，

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;

您可以使用http://www.jsontots.com/创建基于 JSON 的接口

于 2018-01-16T09:03:09.597 回答
0

您的“数据”是一个对象，具有属性“结果”。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;
            }
于 2018-01-16T09:08:31.513 回答