Typcasting json到class angular 2

时间:2016-10-20 11:09:36

标签: javascript angular typescript

我一直在网上学习一些教程,并且得出的结论是,如果我的Angular 2应用程序调用了一个休息端点,我可以自动将结果映射到接口或我定义的类。因此,我试图做后者。以下是我正在使用的一些示例json:

{
  "StudentResponse": {
    "haveProblems": false,
    "students": [
      {
        "id": "55",
        "name": "Joel"
      },
      {
        "id": "56",
        "name": "Anderson"
      }
    ]
  }
}

以下是我试图构建的两个类。首先,这是我的主要响应包装器。

import {Students} from "./Students";

export class StudentResponse {

    haveProblems: boolean;
    students: Student[];

    constructor(json: any) {
        console.log("### we are in the main response constructor");
        this.haveProblems = json.StudentResponse.haveProblems;
        if(json.StudentResponse.students && this.haveProblems != true) {
            this.students = json.StudentResponse.students.map((student) => new Student(student));
        }
    }
}

这是主响应包装器中的子项。

export class Student {

    id: string;
    name: string;

    constructor(student: any) {
        if (student) {
            this.id = student.id;
            this.name = student.name;
        }
    }
}

我在以下GET Rest调用中调用此类型的映射:

private getStudents(url: string): StudentResponse {
    return this._http.get(url, getOptions())
        .map(res => <StudentResponse>res.json())
        .catch(this.handleError)
}

我注意到我的StudentResponse类中的控制台语句永远不会被调用。但是,如果我在map方法中添加一个匿名函数,我可以解析json并手动创建一个新的StudentResponse。显然,我想让自己更容易,并让角度做到这一点。我希望我仍然能够获得该文章的链接,但我希望其他人可以在这里进行类型转换,并指出这些问题。

尝试使用不起作用的评论的其他内容:

constructor(res: Response) {
    console.log("### we are in the constructor");
    let json = res.json();
    ...
}

// map the rest response
.map(res => new StudentResponse(res))

1 个答案:

答案 0 :(得分:2)

Posting my comment as an answer:

To call the constructor you need to change it to

.map(res => new StudentResponse(res.json())