来自http get request

时间:2016-10-11 05:53:01

标签: javascript angular typescript

我开始学习角度2.我尝试通过http get请求获取一些数据,然后我想用这些数据构建对象,以便稍后我可以用模板显示它们。如果我以错误的方式思考你可以告诉我。

我有我的模型AnalyticsData:

export class AnalyticsData {
     pagePath: string;
     pageViews: number;
     uniquePageViews: number;
     avgTimeOnPage: number;
     entrances: number;
     bounceRate: number;

    constructor(object?: any) {
        this.pagePath = object && object.pagePath || null;
        this.pageViews = object && object.pageViews || null;
        this.uniquePageViews = object && object.uniquePageViews || null;
        this.avgTimeOnPage = object && object.avgTimeOnPage || null;
        this.entrances = object && object.entrances || null;
        this.bounceRate = object && object.bounceRate || null;
    }

}

我的数据服务:

export class DataService {

    private dataUrl: string = 'http://example.com/app/analyticsdata';
    constructor(private http: Http) { }

    getData() {
        return this.http.get(this.dataUrl)
            .map((response: Response) => response.json());
    }

}

我的AnalyticsComponent:

export class AnalyticsComponent implements OnInit {

    myData: Array<AnalyticsData>;

    constructor(private services: DataService) { }

    ngOnInit(): void {
        this.getData();
    }

    getData() {
        this.services.getData()
            .subscribe(
            function (response) {
                response.forEach((element: AnalyticsData, index: number) => {
                    this.myData.push(
                        new AnalyticsData({
                            pagePath: element['ga:pagePath'],
                            pageViews: element.pageViews,
                            uniquePageViews: element.uniquePageViews,
                            avgTimeOnPage: element.avgTimeOnPage,
                            entrances: element.entrances,
                            bounceRate: element.bounceRate
                        })
                    );
                });
            },
            function (error) { console.log("Error happened" + error) },
            function () {
                console.log("the subscription is completed");
            }
            );

    }

}

上述错误是:EXCEPTION: Cannot read property 'push' of undefined。我不明白为什么会这样,因为我已经在类的顶部分配了变量myData

1 个答案:

答案 0 :(得分:1)

还可以使用 arrowFunction ()=>,如下所示,

getData() {
        this.services.getData()
            .subscribe(
            (response) => {                                       //<<<<===here
                response.forEach((element: AnalyticsData, index: number) => {
                    this.myData.push(
                        new AnalyticsData({
                            pagePath: element['ga:pagePath'],
                            pageViews: element.pageViews,
                            uniquePageViews: element.uniquePageViews,
                            avgTimeOnPage: element.avgTimeOnPage,
                            entrances: element.entrances,
                            bounceRate: element.bounceRate
                        })
                    );
                });
            },
            (error) => { console.log("Error happened" + error) }, //<<<===here
            () => {                                               //<<<===here
                console.log("the subscription is completed");
            }
            );

    }