Angular4: Comment appliquer la logique à la valeur d'entrée?

Question

Prendre une valeur d'une forme app.component.html

<input type="number" class="form-control" [(ngModel)]="value" /> 
     <!-- <p><button (click)="submit()" class="btn btn-warning btn-sm">Submit</button></p> --> 
     <p>value: {{ value }}</p> 
     <p>newvalue: {{ newvalue }}</p> 

Puis dans app.component.ts Je veux simplement appliquer la logique d'ajouter 2 à cette valeur, passant à NEWVALUE puis utiliser l'interpolation {{newvalue}} pour l'afficher dans le app.component.html

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
    value: number = null; 
    newvalue: number = null; 

    constructor(){ 
    // this.fun(); 
    } 

    ngOnInit(){ 
    // this.fun(); 
    } 

    // submit(){ 
    // console.log(this.value); 
    // } 

    fun(){ 
    console.log('newvalue: ' + this.newvalue); 
    console.log('value: ' + this.value); 
    this.newvalue = this.value + 2; 
    console.log('after->newvalue: ' + this.newvalue); 
    console.log('after->value: ' + this.value); 
    } 
} 

J'ai essayé beaucoup de choses, mais où dois-je placer

this.newvalue = this.value + 2; 

de sorte que la valeur sera mise à jour chaque fois que le inout change?

Merci

Answer 1

Vous pouvez utiliser l'événement ngModelChange pour ce faire

<input type="number" class="form-control" [(ngModel)]="value" (ngModelChange)="fun()"/> 

Answer 2

Vous pouvez directement utiliser la variable de valeur ci-dessous,

<input type="number" class="form-control" [(ngModel)]="value" /> 
<p>{{ value*2 }}</p> 

ou utiliser le ngModelChange

<input type="number" class="form-control" [(ngModel)]="value" (ngModelChange)="fun()"/> 
    <p>{{ newValue }}</p>