时间戳

首页 > 解决方案 > Angular - View 打印旧值和新值

html - Angular - View 打印旧值和新值

问题描述

使用角。我有一个变量 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

我每次都想看到的当然是Cluster number 的当前值，即modelResponse。

标签： htmlangulartypescriptdata-bindingangular8

解决方案

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

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

推荐阅读