TypeScript中的'this'范围

Question

在我的网页上,我删除了表格中的行上的图标,如下所示:

我正在使用TypeScript,我附加了一个onClick监听器来执行一个名为的函数OnRemoveClick,就像这样$('.remove').click(this.OnRemoveClick);

OnRemoveClick 零2个字段(在行上单击删除图标)然后执行2个函数,如下所示:

private OnRemoveClick(): void {
    $(this).parents('tr').find('.input-qty').val('0');
    $(this).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

我遇到的问题是,当我到达时,它会崩溃GetInputFieldsToJson:

TypeError:this.GetInputFieldsToJson不是HTMLAnchorElement.Index.OnRemoveClick中的函数

我意识到这是因为this在OnRemoveClick附加的上下文中,HTMLAnchorElement这意味着我无法从那里访问我的功能.

我试过了什么

我尝试使用如下的lambda表达式设置onClick侦听器:

$('.remove').click(() => this.OnRemoveClick);

但这意味着行上零字段的两个jQuery表达式不再起作用

Answer 1

正如您可能已经理解的那样,这里的问题是,当调用事件处理程序时,默认上下文作为触发该事件的dom元素.因此,您无法使用该引用调用对象的方法.

对于这个问题的多个解决方案中,一个简单的解决方案是通过使用如下面给出的并访问使用所述目标元件Function.bind()回调函数的自定义上下文Event.currentTarget在回调等

private OnRemoveClick(e): void {
    $(e.currentTarget).parents('tr').find('.input-qty').val('0');
    $(e.currentTarget).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

然后

$('.remove').click(this.OnRemoveClick.bind(this));