Question

createCharge() {
let a = ((document.getElementById('amount') as HTMLInputElement).value);
let b = ((document.getElementById('prescription') as HTMLInputElement).value);
let c = ((document.getElementById('vision') as HTMLInputElement).value);
let d = ((document.getElementById('clinic') as HTMLInputElement).value);
let e = ((document.getElementById('dental') as HTMLInputElement).value);
let t = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d) + parseFloat(e);
if (a <= t) {
  alert('total amount should less than ' + this.charge.amount);
  return false;
}

这是我的ts文件代码。这是有效的，但它显示错误。在编译时。

这是我面临的错误：

错误TS2365：运营商＆＃39;＆lt; =＆＃39;不能应用于类型＆＃39;字符串＆＃39;和＆＃39;数字＆＃39;。

Answer 1

在您的代码中，a是字符串，t是数字。要比较它们，您需要编写

if (parseFloat(a) <= t)

我强烈建议您修改代码，以便不使用本机文档对象及其查询方法。这对Angular来说是不好的做法。使用表单将是一个更好的选择。它会使更清晰，更易读的代码（更少）。但是如果你不想要包含一个表单，那么“有角度的方式”将类似于以下内容：

在模板中

 <input type=text #amount />
 <input type=text #prescription />
 <input type=text #vision />
 <input type=text #clinic />
 <input type=text #dental />

在组件中，确保导入ViewChild和ElementRef

import { Component, ViewChild, ElementRef, ... }

然后将这些声明添加到您的组件

@ViewChild('amount') amount : ElementRef;
@ViewChild('prescription') prescription : ElementRef;
@ViewChild('vision') vision : ElementRef;
@ViewChild('clinic') clinic : ElementRef;
@ViewChild('dental') dental : ElementRef;

并将您的方法修改为以下内容：

createCharge() {
    let t = 0;
    const chargeTypes = ['amount', 'prescription', 'vision', 'clinic', 'dental'];
    chargeTypes.forEach( type => { t += parseFloat(this[type].value) }); 
    if (parseFloat(this.amount.value) <= t) {
        alert('total amount should less than ' + this.charge.amount);
        return false;
    }
 }

你会注意到我的例子中有很多冗余代码 - 这就是人们使用表单的原因！表单将消除对冗余ViewChild声明的需要，因为您可以从单个表单对象访问所有不同元素的值。

错误错误TS2365：操作员＆＃39;＆lt; =＆＃39;不能应用于类型＆＃39;字符串＆＃39;和＆＃39;数字＆＃39;

1 个答案: