Javascript TypeScript:Uncaught TypeError:this.fName不是函数
我正在使用Typescript,有一个ajax调用,成功后调用另一个function\methodJavascript TypeScript:Uncaught TypeError:this.fName不是函数,javascript,typescript,Javascript,Typescript,我正在使用Typescript,有一个ajax调用,成功后调用另一个function\method deleteTheseSuccess(data) { new Fe.Upsm.Head().showGlobalNotification("Selected Items Deleted"); this.refreshPrintQueueGrid(); <== this is there the error existst (window as any).par
deleteTheseSuccess(data) {
new Fe.Upsm.Head().showGlobalNotification("Selected Items Deleted");
this.refreshPrintQueueGrid(); <== this is there the error existst
(window as any).parent.refreshOperatorPrintQueueCount();
}
这在VS2017中编译时没有任何问题,并相应地生成JavaScript文件
这是JavaScript输出中的调用
PrintQueue.prototype.refreshPrintQueueGrid = function () {
$("#PrintQueueGrid").data("kendoGrid").dataSource.read();
this.refreshPrintQueueStats();
};
我得到的确切错误是
未捕获类型错误:this.refreshPrintQueueGrid不是函数
如果有人能帮助我了解这里出了什么问题,以及是什么导致了这一点,我将不胜感激,因为我的申请表中有很多地方都会出现这种情况
---编辑编译代码
PrintQueue.prototype.refreshPrintQueueGrid = function () {
$("#PrintQueueGrid").data("kendoGrid").dataSource.read();
this.refreshPrintQueueStats();
}
---编辑2--类
}问题是在ajax回调中
dataAccess.ajaxCall(this.deleteteteserror,this.deletesesuccess)代码>
方法this.deleteteSecsuccess
loose'this'上下文(因为ajax调用它)
您可以将包含此
的其他函数包装为self
变量,并将其传递给dataAccess.ajaxCall
编辑
尝试类似的方法(我从head编写代码,所以测试它):
将其添加到类PrintQueue
以下方法
public deleteTheseSuccessWrapper() {
let self = this;
return () => { self.deleteTheseSuccess(); };
}
并通过以下方式在删除这些方法中使用它:
dataAccess.ajaxCall(this.deleteTheseError, this.deleteTheseSuccessWrapper());
编辑-版本2
正如estus在评论中指出的:为什么需要DeleteTheSuccessWrapper?我们可以通过使用胖箭头来忽略它:
dataAccess.ajaxCall(this.deleteTheseError, () => { this.deleteTheseSuccess() });
因此,我们有了oneliner解决方案-我从head编写了上面的代码,但我认为它也应该起作用DeleteTheError
和DeleteTheSuccess
方法作为回调传递。如相关章节所述,有一些方法可以将它们绑定到适当的上下文中
可以将这些方法定义为箭头函数,但正如所述,更通用的方法是将它们定义为原型方法,并将它们绑定到类构造函数中:
constructor(callingView: string) {
this.deleteTheseError = this.deleteTheseError.bind(this);
this.deleteTheseSuccess = this.deleteTheseSuccess.bind(this);
...
}
除了箭头方法外,TypeScript还提供了使用方法装饰器的选项,例如从包中。这为.bind(This)
提供了更好的语法:
能否将调用this.refreshPrintQueueStats()的整个函数/方法发布到此处?似乎您不在类的方法中,因此这不是您所想的。另外,在调用引发错误的函数之前,请尝试创建一个console.log(this)
,并发布控制台告诉您的信息,我认为“this”在很多地方都有问题-给我们提供更多的代码上下文。您的第一个代码片段是PrintQueue类中方法的一部分吗?在这里定义refreshPrintQueueGrid()
?第行中也有一些错误:窗口(如有)。
(未闭合的括号)@OscarPaz这是在同一个类中调用该方法。在这个例子中,这是self(类),所以在这个类中调用这个方法。如果我不使用这个Visual Studio,请您将答案再扩展一点。这是漫长的一天,您能举一个更完整的例子吗?在回调方法中,我是否应该执行类似于让self=this
的操作,然后在有问题的被调用方法中,按此或相反的方式调用它?我现在正在开车,但将在大约20分钟后尝试为什么需要DeleteTheSuccessWrapper?这就是nativebind
已经做过的事情(以及更多)。我刚刚尝试了你的方法,因为我在使用构造函数绑定这个函数的其他函数上遇到了类似的问题,并且继续面临同样的问题
dataAccess.ajaxCall(this.deleteTheseError, () => { this.deleteTheseSuccess() });
constructor(callingView: string) {
this.deleteTheseError = this.deleteTheseError.bind(this);
this.deleteTheseSuccess = this.deleteTheseSuccess.bind(this);
...
}
import bind from 'bind-decorator';
...
@bind
deleteTheseSuccess(data) {...}
@bind
deleteTheseError(xhr) {...}
...