Angular 2无法读取未定义的属性'get'

时间:2016-12-08 17:25:20

标签: http angular

我已经在SO上看过这个错误了很多次,我可以找到的就是我需要确保我的app.modules中提供了我的服务,然后在我的组件的构造函数中调用它。我已经这样做了,但仍然得到错误。我的应用程序中也有http和HTTPMODULES。只有在我的应用程序中使用删除功能时才会出现此错误。这是错误error_handler.js:45 EXCEPTION: Cannot read property 'get' of undefined,这里是一些相关的代码....

app.module.ts

  import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    import { HttpModule, JsonpModule }     from '@angular/http'; <------------HTTP

    import { AppComponent }  from './app.component';
    import { PostRantComponent } from './postRant.component';
    import { PostDataService } from './PostData.Service';    <------------service
    import { Constants } from './app.const.service';



    import { Routing } from './app.routes';
    import { FormsModule }   from '@angular/forms';


    @NgModule({
        imports: [NgbModule.forRoot(), BrowserModule, Routing, FormsModule,   HttpModule, JsonpModule],
        declarations: [AppComponent,,PostRantComponent],
        providers: [PostDataService, Constants],
        bootstrap: [AppComponent]
     })
     export class AppModule { }

服务(尝试将其缩减至只显示相关代码)

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';
import { PostViewModel } from './models/Post';
import { Constants } from './app.const.service';

@Injectable()
 export class PostDataService{

private actionUrl: string;
private headers: Headers;
constructor( private _http: Http, private _constants: Constants ){

    this.actionUrl = _constants.ServerWithApi;

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept','application/json');
}

public GetAll = (): Observable<PostViewModel[]> => {
    return this._http.get(this.actionUrl)
    .map((response: Response) => <PostViewModel[]>response.json())
    .catch(this.handleError);
}

public Delete = (id: string) =>{
   return this._http.delete(this.actionUrl + id)
      .map(res => res.json())
      .catch(this.handleError);
}    

}

组件

import { Component, Attribute, OnInit,ViewChild } from '@angular/core';
import { PostViewModel } from './models/Post';
import { PostDataService } from './PostData.Service';
import { Constants } from './app.const.service';

@Component({
   selector: 'postRant',
   templateUrl: 'html/postRant.html',
})
export class PostRantComponent implements OnInit {
   txtTitle: string;
    txtDescription: string;

    public myPosts : Array<PostViewModel>;
    public newPost : PostViewModel = new PostViewModel();
    constructor(private auth:Auth, private _dataservice: PostDataService){ 

  }

ngOnInit(){
  this.getAllItems();
}

private getAllItems():void {
  this._dataservice
    .GetAll()
    .subscribe((Post: Array<PostViewModel>) => this.myPosts = Post,
      error => console.log(error),
        () => console.log('get all items complete'))
}

delete(id){
  console.log(id);
   this._dataservice.Delete(id)
    .subscribe((res) => {
      this.myPosts = res;
    });
      var index = this.myPosts.findIndex(x => x.id == id);
      this.myPosts.splice(index, 1);
  }
}

如果您对我在git上发布的所有代码感兴趣here,那么它相当大。

修改 错误的图片.... enter image description here

1 个答案:

答案 0 :(得分:1)

似乎错误是由PostData.Service.ts的第52行产生的 即var applicationError = error.headers.get('Application-Error');

这让我猜你的GetAll Http调用错误,但是你要求数据的服务器没有以error.headers

的格式返回数据

向handleError添加debugger;并检查它正在接收的对象。