Javascript 在HTML中显示后端响应

我正在写一份表格。功能性是当我以这种形式输入某个内容时，它会将其发布到后端服务器并返回响应。我可以在控制台中看到输出。我想用HTML显示它。我尝试调用submitForm（）。

形式：FormGroup；
建造师(
公共fb:FormBuilder，
私有http:HttpClient
) {
this.form=this.fb.group({
输入文本：['']
})
}
ngOnInit（）{}
submitForm（）{
var formData:any=new formData（）；
formData.append（“inputText”，this.form.get（“inputText”）.value）
this.http.post（'http://127.0.0.1:5000/predictSentiment，formData）。订阅(
（响应）=>console.log（响应），
（错误）=>console.log（错误）
)
}

输入您的文本
提交
输出：
{{data.response}

您正在*ngFor中调用submitForm（）方法，但它没有返回任何内容。相反，您可以声明一个变量并分配repsonse

data : any;

this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe((response) => 
    this.data = response,
    (error) => console.log(error)
)

并将您的HTML更改为

<div class="card-body">
    <h2 class="card-title">Output:</h2>
    <div *ngFor="let data of data">
      {{data.response}}
    </div>
  </div>

输出：
{{data.response}

您可以使用一个变量，在其中可以设置收到的响应

form: FormGroup;
result: any[];
constructor(
  public fb: FormBuilder,
  private http: HttpClient
) {
  this.form = this.fb.group({
    inputText: ['']
  })
}

ngOnInit() {}

submitForm() {
  var formData: any = new FormData();
  formData.append("inputText", this.form.get('inputText').value)

  this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(
    (response) => { this.result = response; },
    (error) => console.log(error)
  )
}

在html中绑定变量以显示内容：

<div class="card col-md-6">
  <div class="card-body">
    <h2 class="card-title">Output:</h2>
    <div *ngFor="let data of results">
      {{data.id}} - {{data.name}}
    </div>
  </div>
</div>

产出将是：

1 - XXX
2 - YYY

---

根据经验，尽量避免从模板表达式调用函数，如

*ngFor=“let data of submitForm（）

，

*ngIf=“submitForm（）”

和

{{submitForm（）}

。它们通常会被调用多次

当然，我们可以通过改变变化检测策略来解决这种行为，但这将是一个解决问题的方法，否则问题很容易解决

在您的例子中，您可以在局部变量中分配HTTP响应，并在模板中对其进行循环

控制器

形式：FormGroup；
responseData:any=[]；/{this.responseData=response}，//{console.log（错误）}
);
}

模板

输出：
{{data？.response}

如果您希望直接查看响应数据而不使用任何格式

只需使用JSON管道

{{responseData | json}}

您需要将响应分配给控制器中的任何变量

响应数据：任何；
submitForm（）{
var formData:any=new formData（）；
formData.append（“inputText”，this.form.get（“inputText”）.value）
this.http.post（'http://127.0.0.1:5000/predictSentiment，formData）。订阅(
（响应）=>{this.responseData=response}，//{console.log（错误）}
);
}

然后在模板中使用JSONpipe绑定变量

输出：
{{responseData | json}}
请详细说明要求好吗？请尝试添加控制台中的输出。您的代码段失败。
1 - XXX
2 - YYY