Angular 输出EventEmitter始终未定义

我有一个组件需要发出一个值，但我不能理解为什么我调用它时，

@Output（）

总是

未定义。我在其他组件中有完全相同的代码，并以相同的方式触发它，但它只是不想在这种情况下工作

我在这里做错什么了吗

export class DropdownOptionsSingleComponent implements AfterViewInit {
  @Input() current: any;
  @Output('currentChange') onCurrentChange: EventEmitter<any> = new EventEmitter();

  private isOpen: boolean = false;

  constructor(private _globals: GlobalVariablesService, private _elementRef: ElementRef) {
    this.ns = _globals.ns;

    document.addEventListener('click', (e) => {

      // If the clicked element is not the component element or any of its children, close the dropdown
      if (_elementRef.nativeElement !== e.target && !_elementRef.nativeElement.contains(e.target)) {
        this.isOpen = false;
      }
    });
  }

  ngAfterViewInit() {

    let list = this._elementRef.nativeElement.getElementsByClassName(this.ns + '-dos-list')[0];
    let options = list.getElementsByTagName('li');

    for (let option of options) {
      option.addEventListener('click', this.select);
    }
  }

  toggle() {

    if (this.disabled) {
      this.isOpen = false;

      return false;
    }

    this.isOpen = !this.isOpen;
  }

  close() {
    this.isOpen = false;
  }

  select(e) {
    this.current = e.target.getAttribute('data-model');

    // Error saying this.onCurrentChange is undefined...
    this.onCurrentChange.emit(this.current);
  }
}

导出类DropDownOptions SingleComponent在ViewInit之后实现{
@输入（）电流：任意；
@输出（'currentChange'）onCurrentChange:EventEmitter=new EventEmitter（）；
私有等参线：布尔值=false；
构造函数（private _globals:GlobalVariablesService，private _elementRef:elementRef）{
this.ns=_globals.ns；
document.addEventListener（'单击'，（e）=>{
//如果单击的元素不是组件元素或其任何子元素，请关闭下拉列表
if（_elementRef.nativeElement！==e.target&&！_elementRef.nativeElement.contains（e.target））{
this.isOpen=false；
}
});
}
ngAfterViewInit（）{
let list=this._elementRef.nativeElement.getElementsByClassName（this.ns+'-dos list'）[0]；
let options=list.getElementsByTagName（'li'）；
for（让选项中的选项）{
option.addEventListener（'click'，this.select）；
}
}
切换（）{
如果（此项已禁用）{
this.isOpen=false；
返回false；
}
this.isOpen=！this.isOpen；
}
关闭（）{
this.isOpen=false；
}
选择（e）{
this.current=e.target.getAttribute（'data-model'）；
//表示此错误时出错。onCurrentChange未定义。。。
this.onCurrentChange.emit（this.current）；
}
}
原因是引用了一个方法，因此丢失了执行上下文。改为使用以下选项：

option.addEventListener('click', (event) => {
  this.select(event);
});

或
bind
方法：

option.addEventListener('click', this.select.bind(this));

但是将
bind
方法与TypeScript结合使用也有缺点：



如何从模板中调用
select
方法？@ThierryTemplier我没有，我必须使用
选项将函数绑定到列表元素。addEventListener（'click'，this.select）因为列表元素被转移到组件中。哦，我明白了。这就是你问题的原因；-）先生，事实证明你是对的。我自己应该想到的：谢谢！