Обращение целого числа, взятого из значения события: работает только для первого события

Question

Возиться с обращением числа с входа Angular.

Вот метод и свойство:

reversedIntInput = "";

  reverseInt(event: any) {
    const inputString = (<HTMLInputElement>event.target).value;
    const parsed = parseInt(inputString);

    if (Number.isNaN(parsed) || inputString == "" || inputString === null) {
      this.reversedIntInput = "Nice try but this is not a number.";
    } else {
      this.reversedIntInput = inputString
        .split("")
        .reverse()
        .join("");
    }
  }

, а вот html:

<label>Reverse an Integer</label>
<input type="text" class="form-control" (input)="reverseInt($event)">
<p>{{ reversedIntInput }}</p>

Если я введу «d» на входе, оно действительно покажет «Хорошая попытка, но это не число». если я наберу «45» на входе, он действительно отображает «54».

Но если я наберу «54 ddd», он просто переворачивает его в виде строки и отображает «ddd45», когда должен отображаться « Хорошая попытка, но это не число. "

Почему это? Я консольный журнал inputString и parsed, и inputString продолжает обновляться, когда печатается буква, но не анализируется.

Answer 1

Просто проверьте, что inputString имеет значение, и это значение является числом, смотрите это:

if (inputString  && Number(inputString)) {
   this.reversedIntInput = reverse logic .....
} else {
  this.reversedIntInput = "Nice try but this is not a number.";
}

Answer 2

Это происходит потому, что parseInt возвращает допустимое значение Number, если вы передаете строку, начинающуюся с цифры. Он просто игнорирует то, что идет после числа:

const inputString = '54ddd';
const parsed = parseInt(inputString);

console.log(parsed); // prints 54

Поэтому, когда вы проверяете Number.isNaN(parsed) в этом случае, он вернет false, потому что 54 является действительным Number.

Вместо из Number.isNaN, вы можете использовать isNaN непосредственно в вашей строке (inputString), и она будет работать так, как вы ожидаете ( да, Number.isNan и isNan - разные функции * 1023) *):

if (isNaN(inputString) || inputString == "" || inputString === null) {

При вызове isNan для строки, которая не является целым числом (даже если оно начинается с единицы), возвращается true:

const inputString = '54ddd';

console.log(isNaN(inputString)); // prints true