angularjs – TypeError:无法读取[null]中未定义的属性’post’
发布时间:2020-12-17 07:34:05 所属栏目:安全 来源:网络整理
导读:在我的Angular 2项目中,ListingService无法通过post从服务器获取数据.我收到这个错误: EXCEPTION: TypeError: Cannot read property 'post' of undefined in [null]ORIGINAL EXCEPTION: TypeError: Cannot read property 'post' of undefinedORIGINAL STACK
在我的Angular 2项目中,ListingService无法通过post从服务器获取数据.我收到这个错误:
EXCEPTION: TypeError: Cannot read property 'post' of undefined in [null] ORIGINAL EXCEPTION: TypeError: Cannot read property 'post' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property 'post' of undefined at ListingService.getListings (http://localhost:3000/app/listing.service.js:30:30) at ListingsComponent.getListings (http://localhost:3000/app/listings.component.js:45:41) at ListingsComponent.ngOnInit (http://localhost:3000/app/listings.component.js:41:26) at AbstractChangeDetector.ChangeDetector_HostListingsComponent_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:10897:14),<anonymous>:22:99) at AbstractChangeDetector.detectChangesInRecords (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8824:14) at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8807:12) at AbstractChangeDetector._detectChangesContentChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8871:14) at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8808:12) at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8877:14) at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8811:12) 我的ListingService.ts看起来像这样: import {Injectable,Injector} from 'angular2/core'; import {HTTP_PROVIDERS,Http,Headers} from 'angular2/http'; import {Listing} from './listing'; import 'rxjs/add/operator/map'; @Injectable() export class ListingService { http: Http; listings: Array<Listing>; getListings() { var headers = new Headers(); headers.append('Content-Type','application/json'); this.http.post('http://144.376.29.134:and-so-on',JSON.stringify( {"id":1,"title": "Title","description": "Проводите","discount": "21%","imageUrl": "http://lorempixel.com/400/200/sports","tags": [{"tag": "Еда"}] }),{headers:headers} ).map(res => res.json()) .subscribe((res:Array<Listing>) => this.listings = res); return Promise.resolve(this.listings); } getListing(id: number) { return Promise.resolve(this.listings) .then(listings => listings.filter(l => l.id === id)[0]); } } 使用ListingService的ListingsComponent如下所示: import {Component,OnInit} from 'angular2/core'; import {HTTP_PROVIDERS,Headers} from 'angular2/http'; import {Listing} from './listing'; import {ListingService} from './listing.service'; import 'rxjs/add/operator/map'; @Component({ .... }) export class ListingsComponent implements OnInit { listings: Array<Listing>; constructor(private listingService:ListingService,private _router: Router) {} ngOnInit() { this.getListings(); } getListings() { this.listingService.getListings().then(listings => this.listings = listings); } getListing(id: number) { return Promise.resolve(this.listings) .then(listings => listings.filter(l => l.id === id)[0]); } gotoDetail(listing: Listing) { this._router.navigate(['ListingDetail',{ id: listing.id }]); } } 这有什么问题?
您必须将HTTP_PROVIDERS添加到组件提供程序数组,如下所示:
providers: [HTTP_PROVIDERS] 或者最好是在这样的引导程序中: bootstrap(AppComponent,[HTTP_PROVIDERS]); 而且你在ListingService中缺少构造函数http注入: export class ListingService { constructor(private http : Http){} } 附录 您没有收到任何列表的原因是因为您使用的是Promise而不是Observable: 在ListingService中的getListings()中返回: return this.http.post("bla bla").map(res => res.json).map((res) => { return this.listings = res; }); 然后在ListingsComponent的getListings()中订阅这个: getListings() { this.listingService.getListings().subscribe(listings => this.listings = listings); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |