Question

我正在使用Angular 6来构建应用程序。在我的应用程序中，我有以下代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})

export class SearchComponent implements OnInit {

  constructor(private http: HttpClient) {}

  setBackgroundImage(){
    //code here..
  }

  searchCard(evt) {
    evt.preventDefault();

    let inputField_Id = <HTMLInputElement>document.getElementById("inputField_Id");
    let id = inputField_Id.value;
    //code here..

    if(id){
      let url = "http://localhost:3000/card/" + id;
      this.sendToServer(url);   //This is where the problem is
    }
  }

  sendToServer(url){
    this.http.get(url).subscribe(response => {
        //code here..
    });
  }

  ngOnInit() {
    this.setBackgroundImage();

    let searchForm = document.getElementById("searchForm");
    searchForm.addEventListener("submit", this.searchCard);
  }
}

我试图从函数sendToServer中调用方法/函数searchCard，但我无法做到。它告诉我“this.sendToServer不是...的功能”

如果我在console.log(this);中searchCard，我会获得触发提交事件的HTMLform元素。

如果我在函数中创建了let self = this;变量，我会得到相同的结果。

相反，我尝试将self创建为类SearchComponent的属性，并在self = this;函数中设置ngOnInit。但是然后自我==窗口对象。我在构造函数中尝试了同样的事情，但结果相同。

如何在searchCard中调用sendToServer？

Answer 1

试试这个

searchForm.addEventListener("submit", (event)=>{
 this.searchCard(event);
 });

它应该可以正常工作

它的工作原理是因为箭头函数绑定了上下文，在下一个函数中知道这与本类相同，我们可以用类调用这个函数。

您可以阅读有关箭头功能和绑定here

的更多信息

TypeScript this.X不是一个函数

1 个答案: