在 Angular HTML 中显示后端响应

Question

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

form: FormGroup;

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) => console.log(response),

    (error) => console.log(error)

  )

}

<div class="container sentiment" style="margin-top: 30px;">

  <div class="row">

    <div class="card col-md-6">

      <div class="card-body">

        <form [formGroup]="form" (ngSubmit)="submitForm()">

          <div class="form-group">

            <h2 class="card-title">Enter Your text</h2>

            <textarea class="form-control" formControlName="name" cols="30" rows="10" placeholder="Enter text" style="width: 100%;"></textarea>

          </div>

          <div class="form-group">

            <button class="btn btn-danger btn-block btn-lg">Submit</button>

          </div>

        </form>

      </div>

    </div>

  </div>

</div>

<div class="card col-md-6">

  <div class="card-body">

    <h2 class="card-title">Output:</h2>

    <div *ngFor="let data of submitForm()">

      {{data.response}}

    </div>

  </div>

</div>

Answer 1

如果要直接查看响应数据而不设置任何格式。只需使用 JSON 管道{{ responseData | json }}您需要为控制器中的任何变量分配响应responseData: any;submitForm() {&nbsp; var formData: any = new FormData();&nbsp; formData.append("inputText", this.form.get('inputText').value)&nbsp; this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(&nbsp; &nbsp; (response) => { this.responseData = response },&nbsp; &nbsp; &nbsp; &nbsp;// <-- assign the value here&nbsp; &nbsp; (error) => { console.log(error) }&nbsp; );}然后在模板中使用 JSONpipe 绑定变量<div class="card col-md-6">&nbsp; <div class="card-body">&nbsp; &nbsp; <h2 class="card-title">Output:</h2>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {{responseData | json }}&nbsp; &nbsp; </div>&nbsp; </div></div

Answer 2

根据经验，尽量不要从 模板表达式 （如 、 和 ） 调用函数。它们通常被调用的次数比看起来的次数要多。*ngFor="let data of submitForm()*ngIf="submitForm()"{{ submitForm() }}当然，我们可以通过更改检测策略来解决此行为，但这将是解决问题的解决方案，否则可以轻松解决。在您的例子中，您可以在局部变量中分配HTTP响应，并在模板中循环访问它。请尝试以下操作控制器form: FormGroup;responseData: any = [];&nbsp; &nbsp; &nbsp; &nbsp; // <-- define a variable and assign an empty arrayconstructor(&nbsp; public fb: FormBuilder,&nbsp; private http: HttpClient) {&nbsp; this.form = this.fb.group({&nbsp; &nbsp; inputText: ['']&nbsp; })}ngOnInit() {}submitForm() {&nbsp; var formData: any = new FormData();&nbsp; formData.append("inputText", this.form.get('inputText').value)&nbsp; this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(&nbsp; &nbsp; (response) => { this.responseData = response },&nbsp; &nbsp; &nbsp; &nbsp;// <-- assign the value here&nbsp; &nbsp; (error) => { console.log(error) }&nbsp; );}模板<ng-container *ngIf="responseData.length > 1">&nbsp; <div class="card col-md-6">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h2 class="card-title">Output:</h2>&nbsp; &nbsp; &nbsp; <div *ngFor="let data of responseData">&nbsp; &nbsp; &nbsp; &nbsp; {{data?.response}}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></ng-container>

Answer 3

您正在 *ngFor 中调用方法 submitForm（），但它没有返回任何内容。相反，您可以声明一个变量并分配 repsonsedata : any;this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe((response) =>&nbsp;&nbsp; &nbsp; this.data = response,&nbsp; &nbsp; (error) => console.log(error))并将您的 HTML 更改为<div class="card-body">&nbsp; &nbsp; <h2 class="card-title">Output:</h2>&nbsp; &nbsp; <div *ngFor="let data of data">&nbsp; &nbsp; &nbsp; {{data.response}}&nbsp; &nbsp; </div>&nbsp; </div>

Answer 4

您可以有一个变量，您可以在其中设置收到的响应。form: FormGroup;result: any[];constructor(&nbsp; public fb: FormBuilder,&nbsp; private http: HttpClient) {&nbsp; this.form = this.fb.group({&nbsp; &nbsp; inputText: ['']&nbsp; })}ngOnInit() {}submitForm() {&nbsp; var formData: any = new FormData();&nbsp; formData.append("inputText", this.form.get('inputText').value)&nbsp; this.http.post('http://127.0.0.1:5000/predictSentiment', formData).subscribe(&nbsp; &nbsp; (response) => { this.result = response; },&nbsp; &nbsp; (error) => console.log(error)&nbsp; )}在 html 中绑定变量以显示内容：<div class="card col-md-6">&nbsp; <div class="card-body">&nbsp; &nbsp; <h2 class="card-title">Output:</h2>&nbsp; &nbsp; <div *ngFor="let data of results">&nbsp; &nbsp; &nbsp; {{data.id}} - {{data.name}}&nbsp; &nbsp; </div>&nbsp; </div></div>示例：如果返回的数据如下所示：[{ id: 1, name: "XXX"},{ id: 2, name: "YYY"},]输出为：1 - XXX2 - YYY