第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在 Angular HTML 中顯示后端響應(yīng)

在 Angular HTML 中顯示后端響應(yīng)

冉冉說 2022-08-27 14:07:30
我正在用Angular寫一個表單。功能是當(dāng)我以該形式輸入某些內(nèi)容時，它會將其發(fā)布在后端服務(wù)器上并返回響應(yīng)。我可以在控制臺中看到輸出。我想用HTML顯示它。我嘗試調(diào)用 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>
查看完整描述

4 回答

?
侃侃爾雅

TA貢獻1801條經(jīng)驗 獲得超16個贊

如果要直接查看響應(yīng)數(shù)據(jù)而不設(shè)置任何格式。


只需使用 JSON 管道{{ responseData | json }}


您需要為控制器中的任何變量分配響應(yīng)


responseData: any;

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.responseData = response },       // <-- assign the value here

    (error) => { console.log(error) }

  );

}

然后在模板中使用 JSONpipe 綁定變量


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

  <div class="card-body">

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

    <div>

      {{responseData | json }}

    </div>

  </div>

</div


查看完整回答
反對 回復(fù) 2022-08-27
?
喵喔喔

TA貢獻1735條經(jīng)驗 獲得超5個贊

根據(jù)經(jīng)驗，盡量不要從 模板表達(dá)式 （如 、 和 ） 調(diào)用函數(shù)。它們通常被調(diào)用的次數(shù)比看起來的次數(shù)要多。*ngFor="let data of submitForm()*ngIf="submitForm()"{{ submitForm() }}


當(dāng)然，我們可以通過更改檢測策略來解決此行為，但這將是解決問題的解決方案，否則可以輕松解決。


在您的例子中，您可以在局部變量中分配HTTP響應(yīng)，并在模板中循環(huán)訪問它。請嘗試以下操作


控制器


form: FormGroup;

responseData: any = [];        // <-- define a variable and assign an empty array


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.responseData = response },       // <-- assign the value here

    (error) => { console.log(error) }

  );

}

模板


<ng-container *ngIf="responseData.length > 1">

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

    <div class="card-body">

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

      <div *ngFor="let data of responseData">

        {{data?.response}}

      </div>

    </div>

  </div>

</ng-container>


查看完整回答
反對 回復(fù) 2022-08-27
?
森欄

TA貢獻1810條經(jīng)驗 獲得超5個贊

您正在 *ngFor 中調(diào)用方法 submitForm（），但它沒有返回任何內(nèi)容。相反，您可以聲明一個變量并分配 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>



查看完整回答
反對 回復(fù) 2022-08-27
?
有只小跳蛙

TA貢獻1824條經(jīng)驗 獲得超8個贊

您可以有一個變量，您可以在其中設(shè)置收到的響應(yīng)。


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 中綁定變量以顯示內(nèi)容：


<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>

示例：如果返回的數(shù)據(jù)如下所示：


[

{ id: 1, name: "XXX"},

{ id: 2, name: "YYY"},

]

輸出為：


1 - XXX

2 - YYY


查看完整回答
反對 回復(fù) 2022-08-27
  • 4 回答
  • 0 關(guān)注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號