Создание и вызов пользовательской функции внутри углового класса

Question

Я создал пользовательскую функцию внутри класса, как я могу вызвать ее в том же классе?

Пользователь вводит слово в поле ввода. Это вызывает функцию "onNameKeyUp" ниже. Я должен проверить, является ли слово множественным числом: если да, я превращаю его в единственную форму. Ниже я приведу очень упрощенный пример:

  export class HomeComponent implements OnInit {
  spelling="";

  tokenizeSpellingEnglish(item: string): string{
  if (item =="houses"){
    item = "house";
  }
     return item;
  }

   onNameKeyUp(event: any){
    this.spelling = event;
    this.spelling = this.spelling.toLowerCase();
    this.tokenizeSpellingEnglish(this.spelling);
    this.elem.nativeElement.focus();   
   }

Форма единственного числа будет отправлена ​​на сервер для дальнейшей обработки.

приложение отлично работает без проверки орфографии.

В качестве дополнительного примечания мне интересно, является ли это правильным подходом: должен ли я вместо этого анализировать пользовательский ввод на сервере? Тем не менее, я все же хотел бы знать, что не так с приведенным выше кодом.

Answer 1

Если я вас правильно понимаю, и ваш пример кода действительно представляет ваш реальный код, я вижу, что вы звоните tokenizeSpellingEnglish, но никогда не сохраняете возвращенное значение обратно в this.spelling:

export class HomeComponent implements OnInit {
  spelling="";

  tokenizeSpellingEnglish(item: string): string{
  if (item =="houses"){
    item = "house";
  }
     return item;
  }

   onNameKeyUp(event: any){
    this.spelling = event;
    this.spelling = this.spelling.toLowerCase();

    // --> this.tokenizeSpellingEnglish(this.spelling); should be
    this.spelling = this.tokenizeSpellingEnglish(this.spelling);

    this.elem.nativeElement.focus();   
   }

Вы также можете сделать так, чтобы tokenizeSpellingEnglish работал непосредственно над этим. Написание, если это соответствует вашему варианту использования.

Если вместо этого ваш код просто не работает должным образом, я бы посмотрел, как вы распаковываете параметр события в onNameKeyUp. Если вы обрабатываете необработанный объект события из события 'keyup', вам нужно получить значение из свойства target объекта события и поработать с ним:

onNameKeyUp(event: any) {
  this.spelling = event.target.value;
  // the rest of your function as before
}

НТН

Answer 2

Проверка правильности ввода во внешнем интерфейсе, вызов метода, определенного в том же классе, мы используем this как:

@Component({
  selector: 'my-app',
  template: `
    <h3>Check the console below</h3>
     <input #myInput (keydown)="showValue(myInput.value)"/>
  `
})
export class AppComponent  {
  showValue(value: string) {
      this.printTheValue(value);
  }

  printTheValue(value: string) {
      console.log("the current input value: " + value);
  }
}

онлайн демо , чтобы лучше помочь вам проверитьрезультат.