打字稿中的调用函数在 alertify.js 中不起作用答案

【问题标题】：Calling function in typescript not working in alertify.js打字稿中的调用函数在 alertify.js 中不起作用
【发布时间】：2017-03-20 02:34:32
【问题描述】：

我在 typescript 中使用 alertify 插件，它无法识别 getData 函数。请看下面的代码

copyTemplate(id:any, pluginId:any, name:any ) {
     alertify.confirm(`Are you sure you want to copy ${name} to a new project template?`, function () {
        this.getData();
     }, function() {
          (<HTMLInputElement>document.getElementById('prefGroup')).value = '0';
     });
}

它有什么问题？浏览器错误：

core.umd.js:3064 例外：this.getData 不是 functionErrorHandler.handleError@core.umd.js:3064next@ core.umd.js:8039schedulerFn @ core.umd.js:3689SafeSubscriber.__tryOrUnsub @ 订阅者.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ 订阅者.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:3675NgZone.triggerError @ core.umd.js:4038onHandleError @ core.umd.js:3999ZoneDelegate.handleError @ zone.js?1489977130473:207Zone.runTask @ zone.js?1489977130473:139ZoneTask.invoke@zone.js?1489977130473:304 core.umd.js:3069 原始堆栈跟踪：ErrorHandler.handleError @ core.umd.js:3069next @ core.umd.js:8039schedulerFn @ core.umd.js:3689SafeSubscriber.__tryOrUnsub @ 订阅者.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ 订阅者.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:3675NgZone.triggerError @ core.umd.js:4038onHandleError @ core.umd.js:3999ZoneDelegate.handleError @ zone.js?1489977130473:207Zone.runTask @ zone.js?1489977130473:139ZoneTask.invoke@zone.js?1489977130473:304 core.umd.js:3070 TypeError：this.getData 不是函数在 Object.eval [as onOkay] (project-templates.component.ts:126) 在 HTMLButtonElement。 (alertify.js?1489977130519:280) 在 ZoneDelegate.invokeTask (zone.js?1489977130473:236) 在 Object.onInvokeTask (core.umd.js:3969) 在 ZoneDelegate.invokeTask (zone.js?1489977130473:235) 在 Zone.runTask (zone.js?1489977130473:136) 在 HTMLButtonElement.ZoneTask.invoke (zone.js?1489977130473:304)ErrorHandler.handleError @ core.umd.js:3070next @ core.umd.js:8039schedulerFn @ core.umd.js:3689SafeSubscriber.__tryOrUnsub @ 订阅者.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ 订阅者.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:3675NgZone.triggerError @ core.umd.js:4038onHandleError @ core.umd.js:3999ZoneDelegate.handleError @ zone.js?1489977130473:207Zone.runTask @ zone.js?1489977130473:139ZoneTask.invoke@zone.js?1489977130473:304 Subscriber.ts:241 Uncaught TypeError: this.getData 不是函数

【问题讨论】：

标签： jquery angular typescript alertifyjs

【解决方案1】：

使用箭头函数。回调内部“this”的范围不同

copyTemplate(id:any, pluginId:any, name:any ) {
 alertify.confirm('Are you sure you want to copy ${name} to a new project template?',  () => {
    this.getData();
 }, () => {
      (<HTMLInputElement>document.getElementById('prefGroup')).value = '0';
 });

}

或者将 this 的值存储在函数之外并使用它

copyTemplate(id:any, pluginId:any, name:any ) {
 let self = this;
 alertify.confirm('Are you sure you want to copy ${name} to a new project template?',  function() {
    self.getData();
 }, function() {
      (<HTMLInputElement>document.getElementById('prefGroup')).value = '0';
 });

}

【讨论】：