类型错误：无法读取的未定义的属性是'post'在[空]

问题描述

在我的角2项目ListingService通过邮寄无法从服务器获取数据。我得到这个错误：

In my Angular 2 project ListingService can't get data from server via post. I'm getting this error:

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看起来是这样的：

My ListingService.ts looks like this:

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

而ListingsComponent，它采用ListingService，看起来是这样的：

And the ListingsComponent, which uses ListingService, looks like this:

import {Component, OnInit} from 'angular2/core';
import {HTTP_PROVIDERS, Http, 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 }]);
 }
}

有什么可以成为这个问题？

What can be problem of this?

推荐答案

您必须添加 HTTP_PROVIDERS 要么组件提供商数组是这样的：

You have to add HTTP_PROVIDERS to either the component providers array like this:

providers: [HTTP_PROVIDERS]

或者类似这样的引导pferably $ P $：

or preferably in the bootstrap like this:

bootstrap(AppComponent, [HTTP_PROVIDERS]);

和你错过了构造 HTTP注入在 ListingService ：

And you are missing the constructor http injection in the ListingService:

export class ListingService {
   constructor(private http : Http){}
}

补遗

您没有收到任何上市的原因是因为你使用的是无极的，而不是可观察：

The reason you are not receiving any listings is because you are using a Promise instead of Observable:

在 getListings（）在 ListingService 返回这样的：

return this.http.post("bla bla").map(res => res.json).map((res) => {
    return this.listings = res;
});

然后订阅这个在 getListings（）在 ListingsComponent ：

getListings() {
  this.listingService.getListings().subscribe(listings => this.listings = listings);
}

这篇关于类型错误：无法读取的未定义的属性是'post'在[空]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！