angular2 - 将 json 文件内容放入我的类属性中答案

【问题标题】：angular2 - get json file content into my class attributeangular2 - 将 json 文件内容放入我的类属性中
【发布时间】：2016-07-21 13:33:44
【问题描述】：

新手在这里（第一个 angular2 天）

我有一个包含 3 个字段的类：id 和 name，它们被传递给构造函数，还有一个名为 data 的第三个字段应该接收 JSON 文件的内容

export class Hero {
    id: string;
    name: string;
    data: Object;

    constructor(id: string, name: string) {
        this.id = id;
        this.name = name;

        //retrieve JSON and assign it to this.data
        var request = new XMLHttpRequest();
        request.onload = function(){
            var result = JSON.parse(this.responseText);
            this.data = result;
        };

        //get the json file according to the object id
        request.open("get", id+".json", true);
        request.send();

    }
}

然后我像这样实例化对象

new Hero("hero1", "Hero 1");

问题是指令this.data = result; 不起作用，因为this 指的是请求对象，而不是类。

另外，我不知道这是否是正确的方法（以及获取 json 文件）。我仍然很迷失angular2。谢谢

【问题讨论】：

有什么理由不使用http.get()（不能解决您的实际问题）？
@GünterZöchbauer 我看到了http.get() 的一些示例，其中http 对象是构造函数参数，实际上我不明白。如果我添加它，那么实例 new Hero("hero1", "Hero 1"); 将不再有效（缺少 1 个参数）
Http 在添加HTTP_PROVIDERS 时提供（在AppComponent 的bootstrap() 或providers: [...] 中。当组件由Angular 创建时，它传递一个Http 实例（服务) 你可以用它来发出请求。另见angular.io/docs/ts/latest/tutorial/toh-pt6.html
@GünterZöchbauer 谢谢，我会试试

标签： javascript angularjs json typescript angular

【解决方案1】：

改用箭头函数

    request.onload = () => {
        var result = JSON.parse(this.responseText);
        this.data = result;
    };

【讨论】：

这给我错误Property 'responseText' does not exist on type 'Hero'.
它应该从哪里来。我没有在您的代码中看到 responseText 声明或分配给。我猜你的意思是request.responseText

【解决方案2】：

你也可以这样做：

export class Hero {
    id: string;
    name: string;
    data: Object;

    constructor(id: string, name: string) {
        this.id = id;
        this.name = name;

        let request = new XMLHttpRequest();
        request.onload = this.onDataRecieved.bind(this, request);

        request.open("get", id + ".json", true);
        request.send();
    }

    private onDataRecieved(request: XMLHttpRequest): void {
        let result = JSON.parse(request.responseText);
        this.data = JSON.parse(result);
    }
}

【讨论】：