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();   
   }

如果适合您的用例，您还可以直接在{.1}上进行this.spelling的工作。

如果相反，您的代码只是无法正确执行，我将看一下如何解压缩tokenizeSpellingEnglish中的event参数。如果要处理“ keyup”事件中的原始事件对象，则需要从事件对象的onNameKeyUp属性中获取值并使用该值：

target

HTH

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);
  }
}

在线demo，可以更好地帮助您检查结果。

在角度类中创建和调用自定义函数

2 个答案: