无法读取未定义的属性“帖子”：this.http.post 错误答案

【问题标题】：Cannot read property 'post' of undefined: this.http.post ERROR无法读取未定义的属性“帖子”：this.http.post 错误
【发布时间】：2020-06-16 06:49:03
【问题描述】：

我在 Angular 中有以下代码：

export class GameComponent implements OnInit {

  @ViewChild('canvas', { static: true })
  canvas: ElementRef<HTMLCanvasElement>;  

  private ctx: CanvasRenderingContext2D;
  //public  map: (BrickComponent|TileComponent|PlayerComponent)[][];
  public harry: PlayerComponent;
  private http: HttpClient;
  private reponse : string;
  private confirme : number;
  private combat : number;
  private maxX : number;
  private maxY : number ;
  private map: number[][];
  private tab_monst : (MonsterComponent)[];
  json;

  ngOnInit(): void {
    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.init();
  }

我的 Angular（前端）正在使用 JSON 正文发出 POST 请求，并将其发送到服务器，如下所示：

seDeplacer(): void {
  //const url = 'http://1:8080/api/Harry/update/';
  const url = 'http://localhost:5200/api/Harry/update/';


  console.log(this.harry);
  // post body data 
  const response = {
    "Id_Harry" : this.harry.getId,
    "x_harry" : this.harry.getX(),
    "y_harry" : this.harry.getY(),
    "Pv_Harry" : this.harry.getPv(),
    "Force_Harry" : this.harry.getForce()
};
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
  };

  this.http.post(url, response, httpOptions).toPromise().then((data:any) => {
    console.log(data);
    console.log(data.json.test);
    this.json = JSON.stringify(data.json);
  }); 
}

我有一个错误提示：

**core.js:6014 ERROR TypeError: Cannot read property 'post' of undefined
    at GameComponent.seDeplacer (game.component.ts:215)
    at HTMLBodyElement.<anonymous> (game.component.ts:368)**

seDeplacer() 函数调用如下：

catchKeyEvent(): void {
    var elem = document.body;
    elem.addEventListener("keyup", (event)=> {
      var x = this.harry.getX(),
          y = this.harry.getY();

       if( 0 <= x && x < this.maxX && 0 <= y && y < this.maxY ) 
       {
          switch(event.keyCode)
          {
            //=>
          case 39 :
                this.seDeplacer();
                this.harry.incX();

              break;
              //v
          case 40 :
              this.seDeplacer();
              this.harry.incY();

              break;
              //<=
          case 37 :
              this.seDeplacer();
              this.harry.decX();

              break;
          case 38 :
              this.seDeplacer();
              this.harry.decY();

              break;
          }
          this.move(x,y);


        }


  });

catchKeyEvent 在 init 中被调用

 init(): void{

    this.getMap();
    this.getHarry();
    this.getMonsters();
    this.combat = 0;


    this.catchKeyEvent();
    this.catchClickEvent();
  }

问题出在 this.http.post 上。通常我已经声明了私有 http: HttpClient;

你有什么建议吗？谢谢

【问题讨论】：

请准确分享seDeplacer在game.component.ts中的调用方式
我刚刚添加了它
好的，你可能需要分享一下catchKeyEvent的调用方式。您也可以在seDeplacer() 中登录this 吗？问题只是this 的上下文是指窗口或某些事件对象而不是组件。特别是因为通过手动添加事件侦听器而不是 HostBinding 似乎发生了很多事情（理想情况下，您应该使用 HostBinding 和 Renderer2）。
我添加了调用catchKeyEvent的函数
你在构造函数中导入http客户端吗？构造函数（私有 http: HttpClient）{}

标签： json angular typescript rest http

【解决方案1】：

你应该使用依赖注入并像这样注入HttpClient：

import { HttpClient } from '@angular/common/http';

export class GameComponent implements OnInit {

   constructor(private http: HttpClient)

   ...

}

【讨论】：