错误类型错误： 无法读取未定义的属性'post'

Question

我正在尝试发送Arry"Feld"；到我的Flask后端，但我收到错误消息"；ERROR TypeError:无法读取未定义"的属性"post"；

这是我的ts文件：

import { GetApiService } from './../get-api.service';
import { HttpClient} from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sodoku',
templateUrl: './sodoku.component.html',
styleUrls: ['./sodoku.component.css']
})
export class SodokuComponent implements OnInit {
feld = []
public constructor(private http: HttpClient) { }
ngOnInit(): void {
}
createTable(){
document.getElementById('start').remove();
for (let i = 0; i < 9; i++){
for (let k = 0; k < 9; k++){
const elemet = document.getElementById('Sodoku');
const id = String(i) + '/' + String(k);
const input = document.createElement('input');
input.type = "text";
input.maxLength = 1;
input.style.textAlign = "center";
input.style.backgroundColor = "rgb(185,185,185)";
input.style.width = "75px";
input.style.height = "75px";
input.style.fontSize = "75px";
input.id = id;
input.style.gridColumn = String(k+1)
input.style.gridRow = String(i + 1);
if (k == 3 || k == 6){
input.style.borderLeft = "5px solid";
}
if (i == 3|| i == 6){
input.style.borderTop = "5px solid";
}
//newElement.appendChild(input)
elemet.appendChild(input);
}
}
const button = document.createElement('button')
button.addEventListener('click', this.solve)
button.innerHTML = "Solve";
document.getElementById('Sodoku').appendChild(button)
}
solve(): void{
var copyFeld = []
for(let i = 0; i < 9; i++){
copyFeld.push([])
for(let k = 0; k < 9; k++){
var cellvalaue = (<HTMLInputElement>document.getElementById(String(i)+ "/"+ String(k))).value;
if (cellvalaue == undefined){
copyFeld[i].push(0)
}
else{
copyFeld[i].push(Number(cellvalaue))
}
}
}
console.log(copyFeld)
this.feld = copyFeld
this.http.post('http://127.0.0.1:5000/',this.feld).toPromise().then(data =>{
console.log(data['message'])
})
}
}

函数"；解决"；由一个按钮调用；createTable"；函数，该函数也由HTML 中的按钮调用

有人能发现我的错误吗？感谢您对的帮助

Answer 1

我认为这是您的问题：

button.addEventListener('click', this.solve)

单击button时，它将调用组件的solve方法，其中this设置为按钮元素实例，而不是组件实例。(当方法被调用时，您可以通过检查solve方法内部的this来验证这一点——它可能是HTMLButtonElement。(

但是，在该方法中，您需要this作为组件实例的引用，因为该组件实例是Angular的依赖项注入分配给http的。

这就是为什么你会得到"；无法读取未定义的"post"属性；错误，因为如果this是HTMLButtonElement而不是组件类，则this.http将是undefined。

有两种方法可以解决这个问题：

您可以显式地将事件侦听器上下文绑定到组件实例：

button.addEventListener('click', this.solve.bind(this))

这将强制solve方法中的this成为组件实例。

或者，您可以将事件侦听器配置为箭头函数：

button.addEventListener('click', () => this.solve())

这将导致solve中的this与连接事件侦听器的this(即您的组件实例(相同。