ОШИБКА TS2365: Оператор «<=» не может быть применен к типам «строка» и «число»

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: оператор «<=» не может быть применен к типам «строка» и «число». </p>

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, поскольку вы можете получить доступ к значениям всех различных элементов из одного объекта формы.