Question

我正在尝试将 Arry“Feld”发送到我的 Flask 后端，但收到错误消息“错误类型错误：无法读取未定义的属性‘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'])
    })
  }
}

函数“solve”由在“createTable”函数中创建的按钮调用，该按钮也由HTML中的按钮调用

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

Answer 1

我认为这是你的问题：

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

当点击 button 时，它会调用您组件的 solve 方法，并将 this 设置为按钮元素实例而不是您的组件实例。（您可以通过在调用方法时检查 this 方法中的 solve 来验证这一点 - 它可能是一个 HTMLButtonElement。）

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

这就是您收到“无法读取未定义属性'post'”错误的原因，因为如果 this.http 是您的 HTMLButtonElement 而不是您的组件类，则 undefined 将是 this。< /p>

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

您可以将事件侦听器上下文明确bind 到您的组件实例：

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

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

或者您可以将事件侦听器配置为 arrow function：

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

这将导致 this 中的 solve 成为附加事件侦听器的任何 this，即您的组件实例。

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

1 个答案: