Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – TypeError:无法读取[null]中未定义的属性’post’大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的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);
}

大佬总结

以上是大佬教程为你收集整理的angularjs – TypeError:无法读取[null]中未定义的属性’post’全部内容,希望文章能够帮你解决angularjs – TypeError:无法读取[null]中未定义的属性’post’所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。