Angular 为什么typescript中的方法无法访问类级变量？

我不熟悉棱角和打字。以下是相关代码：

export class SearchBarComponent {
    constructor() { }

    public timeDelay = 9999;

    onSubmit(event){

        console.log(this.timeDelay);

    }
}

我希望：

typed 9999

相反，我得到：

typed undefined

我的第一个猜测是，这可能与时间延迟是私有的有关，但将其设置为公共的没有任何区别。正如你在下面看到的，我很容易找到了一个解决办法，然而，我仍然对这种奇怪的行为感到好奇

需要注意的一点是，如果我在方法中定义类变量，它是self（this.timeDelay=9999），它在下次我访问它时会记住它，因此在TypeScript类变量编译成JS的方式中一定有我不理解的地方

这是完整的代码转储，以防我丢失其他内容：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.scss'],
})
export class SearchBarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    let searchbar = document.querySelector('ion-searchbar');
    searchbar.addEventListener('ionInput', this.onSubmit);
  }

  //Used by onSubmit() method to record last input time
  lastInputTime = null;

  public timeDelay = 9999;

  //called on every user input
  //detects whether the user has stopped typing for an arbitrary amount of time and calls search method
  onSubmit(event){

    console.log("typed " + this.timeDelay);

    //technically it's being defined here because defining it outside doesn't appear to work
    this.lastInputTime = Date.now();

    // ToDo import from settings file
    // In milliseconds
    const timeDelay = 1000;

    setTimeout(
        () => {
          console.log(timeDelay + " " + (Date.now() - this.lastInputTime) + " " + this.lastInputTime);

          //Detect if there was any keystroke in the last timeDelay
          //-10 is a buffer
          if (Date.now() - this.lastInputTime >= timeDelay - 10) {
            console.log("submit: " +  event.target.value.toLowerCase());
          }
        },
        timeDelay
    );
  }
}

---

您的

onSubmit

变量正在不同的上下文中执行。因此，在您的

onSubmit

方法中，

此

与您的其他类具有不同的值

您需要将

此

上下文绑定到您的方法，如下所示：

searchbar.addEventListener('ionInput', this.onSubmit.bind(this));

看看Stackblitz演示

编辑：

---

对于将来遇到此问题的任何人，正确的解决方案是直接使用

绑定组件，您的

onSubmit

变量正在不同的上下文中执行。因此，在您的

onSubmit

方法中，

此

与您的其他类具有不同的值

您需要将

此

上下文绑定到您的方法，如下所示：

searchbar.addEventListener('ionInput', this.onSubmit.bind(this));

看看Stackblitz演示

编辑：

---

对于将来遇到此问题的任何人，正确的解决方案是使用

直接绑定组件为什么在方法之后声明属性？属性应该在构造函数和方法之前声明…您没有键入它。您可以将其键入数字<代码>公共延时：数字=9999为什么要访问/查询DOM？建议对组件使用输出指令/属性

@Silvermind很好的一点，这也将组件绑定到类。我将更改代码以使用它。为什么在方法之后声明属性？属性应该在构造函数和方法之前声明…您没有键入它。您可以将其键入数字<代码>公共延时：数字=9999为什么要访问/查询DOM？建议对组件使用输出指令/属性

@Silvermind很好的一点，这也将组件绑定到类。我将更改我的代码以使用此代码。你成功了，谢谢！我甚至不知道绑定方法的存在。你搞定了，谢谢！我甚至不知道bind方法的存在。