将两个数字相乘，打字稿读取 NaN

Question

我试图在数量值更改后获取总价，但它在控制台上显示 NaN

.JS

getTotal(){
  this.totalPrice= (this.price) * (this.quantity) ;
  console.log(this.totalPrice)
}

.HTML

<ion-item>
  <ion-label>Price</ion-label>
  <ion-input type="number" [(ngModel)]="price"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Quantity</ion-label>
  <ion-input (ionChange)="getTotal()" type="number"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Total</ion-label>
  <ion-input type="number" [(ngModel)]="totalPrice"></ion-input>
</ion-item>

Answer 1

尝试使用 getter：
.HTML

    <ion-item>
      <ion-label>Price</ion-label>
      <ion-input type="number" [(ngModel)]="price"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Quantity</ion-label>
      <ion-input [(ngModel)]="quanity" type="number"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Total</ion-label>
      <ion-input type="number" [(ngModel)]="totalPrice"></ion-input>
    </ion-item>

打字稿：

get totalPrice(){
  return (this.price) * (this.quantity) ;
}

Answer 2

您在数量<ion-input>中缺少ngModel指令。所以，this.quantity永远不会更新，我认为它是undefined.所以最后你乘以一个数字，undefined和

5 * undefined = NaN

这就是你得到的。

Answer 3

当数量获取更改事件时，您将调用getTotal并使用this.quantity来计算它。但是，this.quantity 不会在输入中用作值的绑定。

<ion-item>
  <ion-label>Quantity</ion-label>
  <ion-input (ionChange)="getTotal()" type="number" [(ngModel)]="quantity"></ion-input>
</ion-item>