Angular2:在单击的评估中出现错误

Im making request through a button from client to server that i created using express, in request handler there is only console.log('Delete from server'); every time im clicking on it im getting these errors

通过我使用express创建的客户端到服务器的一个按钮发送请求，在请求处理程序中只有控制台。日志(从服务器删除);每当我点击它，我就会得到这些错误

angular2.dev.js:23514 ORIGINAL EXCEPTION: T
ypeError: Cannot read property    'request' of undefined
angular2-polyfills.js:143 Uncaught EXCEPTION:
Error during evaluation of   "click"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'request' of undefined
ORIGINAL STACKTRACE:

The file structure is, there are two folders server and client that have angular and server files respectively

文件结构是，有两个文件夹服务器和客户端分别有角文件和服务器文件

Here is function on button click:

这里是按下按钮的功能:

 deletefromserver(){
     this.http.request("http://localhost:3000/deletedata").subscribe((res :     Response) => {
        console.log(res.json());
    })     
 }

And this is request handler in server file:

这是服务器文件中的请求处理器:

server.get('/deletedata', function(){
console.log('Delete from server');
})

2 个解决方案

#1

You probably forgot to inject the http service in your component

您可能忘记在组件中注入http服务

You should have something like:

你应该有这样的东西:

@Component({...})
class MyComponent {

  constructor(private http: Http) { }

  deleteFromServer() {
    this.http.request("http://localhost:3000/deletedata").subscribe((res : Response) => { console.log(res.json()); })
  }

}

And don't forget to add the HTTP_PROVIDERS in your bootstrap:

不要忘记在引导程序中添加http_provider:

bootstrap(MyComponent, [HTTP_PROVIDERS]);

Your server should also return something:

您的服务器也应该返回一些东西:

server.get('/deletedata', function(req, res) {
  res.json({hello: 'hello world'});
});

#2

I think that you forget to inject the Http instance into your component:

我认为您忘记将Http实例注入您的组件:

@Component({
  (...)
})
export class MyComponent {
  constructor(private http:Http) {
  }
}

Don't forget to add corresponding providers when bootstrapping your main component:

当引导主组件时，不要忘记添加相应的提供者:

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

#1