我已经开始学习 Angular 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()); 
    } 
 
} 

我的分析组件:

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"); 
            } 
            ); 
 
    } 
 
} 

上述错误是:异常:无法读取未定义的属性“push”。我不明白为什么会发生这种情况,因为我已经在类的顶部分配了变量 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"); 
            } 
            ); 
 
    } 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!