Передача параметров в функции в Angular 6?

Question

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

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

export class CalculatorComponent implements OnInit {
  public result:number=0;
  public num:number=0;
  public final:number=0;

  constructor() { }

  ngOnInit() {
  }
  onClick(e){
    this.num = Number(e.target.value);
    this.result = this.num+this.result;
    if(e.target.value == "="){
      console.log(this.result); // the output of console here is : null
      this.display();
    } 
  }

  display(){
      console.log(this.result); // here the console output is : NaN
      this.final = this.result;
  }

}

HTML

<div>
  <input type="number" value="{{result}}"><br><br>
  <button value="1" (click)="onClick($event)">1</button>&nbsp;&nbsp;
  <button value="2" (click)="onClick($event)">2</button>&nbsp;&nbsp;
  <button value="=" (click)="onClick($event)">=</button><br><br>
  Result : {{final}}
</div>

Я хочу напечатать результат в функции отображения, но это не так. даже в функции onClick () результат в операторе if недостижим. Я хочу напечатать результат в функции дисплея

Answer 1

Вы должны проверить if(!isNaN(e.target.value)) при функции onClick.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   public result:number=0;
  public num:number=0;
  public final:number=0;

  constructor() { }

  ngOnInit() {
  }
  onClick(e){
    if(!isNaN(e.target.value)){
    this.num = Number(e.target.value);
    this.result = this.num+this.result;

    }
    if(e.target.value == "="){
      console.log(this.result); // the output of console here is : null
      this.display();
    } 
  }

  display(){
      console.log(this.result); // here the console output is : NaN
      this.final = this.result;
  }
}

https://stackblitz.com/edit/angular-add

Answer 2

Ваше условие должно быть таким:

onClick(e){
if(e.target.value !=='='){

  this.num = Number(e.target.value);
  this.result = this.num+this.result;

}else{
  console.log(this.result);
  this.display();
}    }     

Вы можете проверить это с: Stackblitz.com

Answer 3

Попробуйте изменить порядок в вашем методе onClick, чтобы избежать NaN-исключений. Вы получите NaN, если попытаетесь преобразовать «=» в число.

onClick(e){
    if(e.target.value == "="){
      console.log(this.result); // the output of console here is : null
      this.display();
    } else {
      this.num = Number(e.target.value);
      this.result = this.num+this.result;
    }
  }

Вот это Stackblitz

Answer 4

this.num = Number(e.target.value);//Suppose e.target.value is '='

Вы не можете конвертировать = Символ в число, иначе вы получите NaN

Ваш код должен быть следующим

onClick(e){
  if(e.target.value == "="){
    console.log(this.result);
    this.display();
  }
 else{
  this.num = Number(e.target.value);
  this.result = this.num+this.result;
  }
}