在 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

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

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

您应该检查 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

在 Angular 6 中的函数中传递参数？

Passing parameters in functions in Angular 6?

event-handling

typescript

mean-stack

angular