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

Posted 2023-03-13

【中文标题】无法读取未定义的属性“帖子”：this.http.post 错误

【英文标题】：Cannot read property 'post' of undefined: this.http.post ERROR

【发布时间】：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）

【参考方案1】：

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

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

export class GameComponent implements OnInit 

   constructor(private http: HttpClient)

   ...