NaN 的打字稿错误答案

【问题标题】：typescript error of NaNNaN 的打字稿错误
【发布时间】：2017-11-09 15:49:04
【问题描述】：

很抱歉提出类似的问题，但我似乎真的找不到出路。我被这个计算困住了。基本上参数 a 到 g 是我的 HTML 输入参数的值。我想用它来计算一定的总和。我试图 console.log(+this.a) 它给了我一个数字。但是当我尝试 console.log(this.aa) 它给了我 NaN。我可以知道如何解决它吗？谢谢。

来自我的打字稿文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-song',
  templateUrl: 'song.html',
})
export class SongPage {
  a:string;aa:number = +this.a * 2;
  b:string;bb:number = +this.b * 7;
  c:string;cc:number = +this.c * 6;
  d:string;dd:number = +this.d * 5;
  e:string;ee:number = +this.e * 4;
  f:string;ff:number = +this.f * 3;
  g:string;gg:number = +this.g * 2;
  sumA:number = (this.aa+this.bb+this.cc+this.dd+this.ee+this.ff);
  sumB:number = this.sumA%11;
  sumC:number = 11-this.sumB;

  char: string;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  cal()
  {
    console.log(this.aa);
    if(this.sumC == 1)
    {
      this.char = 'A';
    }
    else if(this.sumC == 2)
    {
      this.char = 'B';
    }
    else if(this.sumC == 3)
    {
      this.char = 'C';
    }else if(this.sumC == 4)
    {
      this.char = 'D';
    }else if(this.sumC == 5)
    {
      this.char = 'E';
    }else if(this.sumC == 6)
    {
      this.char = 'F';
    }else if(this.sumC == 7)
    {
      this.char = 'G';
    }else if(this.sumC == 8)
    {
      this.char = 'H';
    }
    else if(this.sumC == 9)
    {
      this.char = 'I';
    }else if(this.sumC == 10)
    {
      this.char = 'Z';
    }else if(this.sumC == 11 || 0)
    {
      this.char = 'J';
    }else
    {
      this.char = 'NaN';
    }
  }

}

来自我的 HTML

  <ion-input name="two" class="box" maxlength="1" [(ngModel)]="a"></ion-input>
  <ion-input name="three" class="box" maxlength="1" [(ngModel)]="b"></ion-input>
  <ion-input name="four" class="box" maxlength="1" [(ngModel)]="c"></ion-input>
  <ion-input name="five" class="box" maxlength="1" [(ngModel)]="d"></ion-input>
  <ion-input name="six" class="box" maxlength="1" [(ngModel)]="e"></ion-input>
  <ion-input name="seven" class="box" maxlength="1" [(ngModel)]="f"></ion-input>
  <ion-input name="eight" class="box" maxlength="1" [(ngModel)]="g"></ion-input>
  <button ion-button round block (click)="cal()">Validate</button>
  <h2>The character is: {{char}}</h2>

【问题讨论】：

问题出在：aa:number = +this.a * 2; 这并不意味着“确保aa 始终是this.a 的数值乘以2”。这意味着：“使aa的起始值等于this.a的当前值（即undefined，乘以2”当a、b等的值时，您需要重新计算您的字段. 改变。
但是当我使用console.log(this.a) 和console.log(+this.a) 时，它给了我输入的数字！
@DevJo 是的，this.a 将具有您赋予它的任何价值。 this.aa 不会反映对 this.a 所做的更改，除非您以某种方式更新了 this.aa 的值。
@JLRish 你是对的！因此，我改为放入我的 cal() 函数中，现在它可以工作了！

标签： javascript typescript

【解决方案1】：

a 到 g 是未定义的，因此您必须在计算 aa 或 bb 之前获取参数值 ...：

 ngOnInit(){
   this.a = // <-- add value 
   this.a = // <-- add value 
   //...
   this.b = // <-- add value 

  this.aa = +this.a * 2;
  this.bb  = +this.b * 7;
  this.cc  = +this.c * 6;
  this.dd = +this.d * 5;
  this.ee  = +this.e * 4;
  this.ff = +this.f * 3;
  this.gg  = +this.g * 2;

 this.sumA  = (this.aa+this.bb+this.cc+this.dd+this.ee+this.ff);
 this.sumB  = this.sumA%11;
 this.sumC  = 11-this.sumB;

}

【讨论】：