网站搜索

javascript - 双向数据绑定(计算)


我正在尝试使用双向数据绑定来除以我的 gain 和 lotSize 变量,但我一直收到这两个错误:

  1. 算术运算的左侧操作数必须是类型 'any'、'number'、'bigint' 或枚举类型 - (获取错误)
  2. 算术运算的右侧操作数必须是类型 'any'、'number'、'bigint' 或枚举类型(lotSize 错误)

我刚开始使用这些框架,但我感觉这应该是一些非常基础的东西。任何你们能提供的帮助我都会非常感激。

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  splash = true;

  constructor(public navCtrl: NavController) {
    //Splash Animation Timer
    setTimeout(() => this.splash = false, 4500);
  }

  //Calculation Variables
  entryPoint : Number = 0;
  gain : Number = 0;
  loss : Number = 0 ;
  lotSize : Number = 0;
  buyOrSell : Number = 0;

  //Calculation function buying and selling
  calculate = () => {
      let  rewardPips = (this.gain / this.lotSize) ;
  }

}

这是 HTML:

<ion-item>
      <ion-label position="stacked"><b>Entry Point # :</b></ion-label>
      <ion-input type="number" id="entryPoint" placeholder="0.000" [(ngModel)] = "entryPoint" clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked"><b>Desired Monetary Gain $ :</b></ion-label>
      <ion-input type="number" id="gain" placeholder="0.000" [(ngModel)] = "gain" clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked"><b>Willing Monetary Loss $ :</b></ion-label>
      <ion-input type="number" id="loss" placeholder="0.000" [(ngModel)] = 'loss' clearInput></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked"><b>Trading Lot Size # :</b></ion-label>
      <ion-input type="number" id="lotSize" placeholder="0.000" [(ngModel)] = 'lotSize' clearInput></ion-input>
    </ion-item>

    <!--Grid With Checkbow Options-->
    <ion-grid>
      <ion-radio-group [(ngModel)] = "buyOrSell">
        <ion-row>
          <ion-col>
            <ion-item >
              <ion-label><b>Buy</b></ion-label>
              <ion-radio slot="start" value = "1" color="secondary"></ion-radio>
            </ion-item>
          </ion-col>
          <ion-col>
            <ion-item  >
              <ion-label><b>Sell</b></ion-label>
              <ion-radio slot="start" value = "0" color="secondary"></ion-radio>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-radio-group>
    </ion-grid>
    <br>
    <ion-button (click)="calculate()" color ="secondary" class="ion-activatable ripple-parent Primary" expand="block" shape="round">
      <h2><b>Calculate</b></h2>
      <ion-ripple-effect type="unbounded"></ion-ripple-effect>
    </ion-button>

  </ion-card>
</ion-content>

答案#1

将你的变量中的 Number 替换为 number 并检查。

Number 是 number 原始数据类型的包装类。这将帮助你将数字表示转换为 number 类型。由于你没有处理这种情况,因此你可以直接使用原始数据类型 number。