Angular 2从http获取请求的对象获取请求
问题描述:
我已经开始学习angular 2.我尝试通过http get request获取一些数据,然后我想用这些数据创建对象,以便稍后可以使用模板显示它们。如果我用错误的方式思考,你可以告诉我。Angular 2从http获取请求的对象获取请求
我有我的模型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;
}
}
我的DataService:
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
。
答
还可以使用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");
}
);
}
'myData的:数组;' –
micronyks
此添加到你的构造并再次尝试:'this.MyData = [];' –
@HarryNinh谢谢我将你的答案和micronyks答案结合起来解决我的问题。 – amrfs