Angular - View 打印旧值和新值答案

【问题标题】：Angular - View prints old values along with new valuesAngular - View 打印旧值和新值
【发布时间】：2020-03-04 07:01:55
【问题描述】：

使用 Angular。我有一个变量 modelResponse 会更新并打印新值。但随之而来的是，在 html 中，它的所有旧值也会被打印出来。

我在 html [(ngmodel)]= {{{{modelResponse}}}} 中对 modelResponse 使用了 2 路数据绑定

主页.component.html

<span><a mat-raised-button style="margin-left:5rem" color="accent" (click)=show()><b>Score the
      Model</b></a></span>
<br>
<br>


<div class=" example-container" *ngIf=showdirectPredict>
  <form
    style="background-color: cornsilk; size: 0.8rem; font-style: italic;font-family: Arial, Helvetica, sans-serif;font-size: 0.8rem;border-top-right-radius: 0.5rem;border-bottom-left-radius: 0.5rem;border-bottom-right-radius: 0.5rem;border-top-left-radius: 0.5rem"
    (ngSubmit)="makepredictrequest()" #myForm="ngForm">
    <p>
      <br>
      <b style="margin-left: 1rem;">Enter the Embedding Dimensions</b>
      <br>
      <br>
      <mat-form-field class="fields" appearance="fill" style="margin-left:1rem">
        <mat-label>Enter ED d0</mat-label>
        <input matInput placeholder="d0" [(ngModel)]="dee0" name="d0-dimension">
        <!--   <mat-hint>We need your name for the ID badge ;) !</mat-hint>-->
      </mat-form-field>



      <button mat-raised-button type="submit" style="margin-left:2rem" color="primary" md-raised-button>Submit</button>
      <button mat-raised-button type="submit" style="margin-left:1rem" color="primary" (click)=dontshow()
        md-raised-button>Close</button>

      <b style="margin-left: 10rem;"> RESULT : This Non-CRU customer belongs to Cluster Number : {{modelResponse}} </b>

    </p>

    <br>
    <br>
  </form>

主页.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../User.model';
import { Embeddings } from '../embeddings.model';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AccountService } from '../account.service';

import { D0embed } from '../d0embed';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})


export class HomePageComponent implements OnInit {

  showdirectPredict = false;
  modelResponse: any;
  lastResponse: any;
  modelname: any;
  dee0: any;
  ed0: D0embed;
  d0: D0embed[] = [];

  embedding: Embeddings = new Embeddings();// initiate all arrays in this model via constructor or here
  modelResponseString: any;

  constructor(private serv: AccountService) {

  }

  ngOnInit() {
  }



  makepredictrequest() {

    console.log('In makepredictrequest()');

    this.ed0 = this.dee0;

    this.embedding.d0.push(this.ed0)

    this.serv.scoreModel(this.embedding).subscribe((data: any) => {


      this.modelResponse = data['value'];
      console.log('Request finished');
      this.lastResponse = this.modelResponse[this.modelResponse.length - 1];
      console.log('The data received is :' + this.lastResponse);



    });

  }

  show() {
    this.showdirectPredict = true;
  }

  dontshow() {
    this.showdirectPredict = false;
  }
}

使用

结果：此非 CRU 客户属于集群编号：{{modelResponse}}

举个例子，

第一次点击 scoreModel() 时，

结果：此非 CRU 客户属于集群编号：5

第二次点击 scoreModel() 时，结果：此非 CRU 客户属于集群编号：5、13

第三次点击 scoreModel() 时，结果：此非 CRU 客户属于集群编号：5、13、2

我每次都想看到的当然是簇号的当前值，即模型响应。

【问题讨论】：

标签： html angular typescript data-binding angular8

【解决方案1】：

modelResponse 字段似乎是一个数字数组，lastResponse 是该数组中的最后一个数字，即您需要的值。但是模板绑定看起来像This Non-CRU customer belongs to Cluster Number : {{modelResponse}}。

尝试将其更改为This Non-CRU customer belongs to Cluster Number : {{lastResponse}}。

【讨论】：