Question

您好我只想使用一个简单的函数，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());
        });


    }

}

这是我的组件。我正在使用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)

有人可以帮我吗？谢谢！

Answer 1

通过声明public http: Http不会使组件内的Http提供程序实例可用。您必须在构造函数中注入http服务，这将带来http对象。

public constructor(
    private marginService: MarginServcies, 
    private http: Http //<-- added Http service.
) {
 //your code as is
}

从中删除public http: Http（http声明）的声明课程public http: Http的开始

Answer 2

Http是来自角度http模块

的Inbuilt Angular Provider

import { Http, Response } from '@angular/http';

所以你必须将这个http服务注入构造函数。然后只有角度框架解决依赖

export class YourService {
    constructor(private http: Http) {

    }

TypeError：无法读取属性＆＃39; post＆＃39;未定义的

2 个答案: