typescript 类型错误：无法读取未定义的属性“post”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45493298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: Cannot read property 'post' of undefined
提问by Rachel
Hi i just want to use a simple function, http post to post my date to a page.I want the server be able to fetch the date i post.
嗨，我只想使用一个简单的函数 http post 将我的日期发布到页面上。我希望服务器能够获取我发布的日期。
import { Component, OnInit } from '@angular/core';
import { MarginServcies } from '../../services/MarginService';
import { Response } from '@angular/http';
import { Http} from '@angular/http';
//import { Ng2SmartTableModule, LocalDataSource } from 'ng2-smart-table';
@Component({
selector: 'margin',
template: require('./margin.component.html')
})
export class MarginComponent implements OnInit {
public http: Http;
public MarginList = [];
public date: string;
public userdate: string;
pad(i: number) {
return i < 10 ? '0' + i : i;
}
onClick($event: any, userdate) {
userdate = this.date;
//console.log(this.date);
this.http.post('api/date', userdate).subscribe();
}
//get the current date as default
ngOnInit() {
const selectedDate = new Date();
this.date = `${selectedDate.getFullYear()}-${this.pad(selectedDate.getMonth() + 1)}-${this.pad(selectedDate.getDate())}`;
}
public constructor(private marginService: MarginServcies) {
//get Margindata from server
this.marginService.getMargin().subscribe(results => {
this.MarginList = results.json();
//console.log(results.json());
});
}
}
This is my component. I am using webpack, angular 4. I want to use the post function inside the onClick() function. once I click i can post a date. Now i check the console.log() works fine. The erro is:
这是我的组件。我正在使用 webpack，angular 4。我想在 onClick() 函数中使用 post 函数。一旦我点击我可以发布日期。现在我检查 console.log() 工作正常。错误是：
MarginComponent.html:15 ERROR TypeError: Cannot read property 'post' of undefined
at MarginComponent.onClick (margin.component.ts:25)
at Object.eval [as handleEvent] (MarginComponent.html:15)
at handleEvent (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:22850)
at callWithDebugContext (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:24142)
at Object.debugHandleEvent [as handleEvent] (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:23730)
at dispatchEvent (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:19750)
at vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:20342
at HTMLButtonElement.<anonymous> (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:27870)
at ZoneDelegate.invokeTask (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:83738)
at Object.onInvokeTask (vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:15077)
Could anyone help me with that? thanks!
有人可以帮我吗？谢谢！
回答by Pankaj Parkar
Just by declaring public http: Httpwill not make Httpprovider instance available inside component. You have to inject httpservice inside constructor, that will bring httpobject.
仅仅通过声明public http: Http不会使Http提供者实例在组件内部可用。您必须http在构造函数中注入服务，这将带来http对象。
public constructor(
private marginService: MarginServcies,
private http: Http //<-- added Http service.
) {
//your code as is
}
Remove the declaration of
public http: Http(http declaration) from start of classpublic http: Http
public http: Http从类的开头删除（http声明）的声明public http: Http
回答by Code-EZ
Http is an Inbuilt Angular Provider from the angular http module
Http 是来自 angular http 模块的内置 Angular Provider
import { Http, Response } from '@angular/http';
So you have to inject this http service in to the constructor. Then Only angular framework resolve the dependency
所以你必须将这个 http 服务注入到构造函数中。然后只有角框架解决依赖
export class YourService {
constructor(private http: Http) {
}
