将两个数字与打字稿读取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

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

5 * undefined = NaN

这就是你得到的。

Answer 2

尝试使用吸气剂：
的 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 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>