为什么“;这个“;在具有http promise的typescript模块中未定义

why "this" is undefined in typescript module with http promise

本文关键字:typescript 模块 未定义 promise 这个 为什么 http      更新时间:2023-09-26

这是我的第一次打字和角度尝试,我遇到了一个问题。

我有一个模块控制器定义如下(.ts文件):

module app.controllers {
    "use strict"
    import services = app.services;
    export class calendarController {
        calBlock: any;
        deptId: number;
        calSvc: app.services.calendarService;
        static $inject = ["$scope", "calendarService"];
        constructor(isolateScope: directives.calendarScope, calSvc: services.calendarService) {
            this.deptId = isolateScope.deptId;
            this.calSvc = calSvc;
            calSvc.getMonthBlock(12, 2015, 1, this.deptId)
            .then(
                function (response) {
                    //promise fullfilled (regardless of outcome)                
                    this.calBlock = response.data;
                 },
                 function (error) {
                //handle errors
                    alert(error);
                 }   
             );
        }
    }
}

以下是该控制器所依赖的服务:

module app.services {
    "use strict"
    export class calendarService {
        private _http: ng.IHttpService;
        static $inject = ["$http"];
        constructor(http: ng.IHttpService) {
            this._http = http;            
        }
        getMonthBlock = function (month:number, year:number, calId:number, deptId:number) {
            //initialise service url
            var sURL = _sf.getServiceRoot('KrisisShifts') + "CalendarService/GetMonthCal/" + calId + "/" + deptId + "/" + month + "/" + year;
            //create config object for get function
            var config = {
                URL: sURL,
                method: "GET",
                dataType: 'json',
                headers: {
                    'ModuleId': _sf.getModuleId(),
                    'TabId': _sf.getTabId(),
                    'RequestVerificationToken': _sf.getAntiForgeryValue()
                }
            }
            //return the promise of the http.get function
            return this._http.get(sURL, config);
        }
    }
}

问题发生在控制器模块的以下线路上:

this.calBlock = response.data;

问题是THIS未定义,因此calBlock也未定义,jsConsole抛出错误:

TypeError:无法设置未定义的属性"calBlock"在shift-calendar-controller.js?cdv=28:14

我对javascript、angular和typescript相对陌生,所以我很难弄清楚为什么"this"是未定义的。我认为这是因为它包含在一个函数中。

我需要一种方法来将reponse.data(来自$http调用的json数组)分配给我的控制器的typescript类的calBlock属性。有人能帮我理解为什么这个在响应函数中未定义,以及我如何访问它吗?

感谢

编辑:基于tymeJV答案的解决方案

这是重新编写的calBlock调用:

            calSvc.getMonthBlock(12, 2015, 1, this.deptId)
            .then((response) => {
                    //promise fullfilled (regardless of outcome)                
                    this.calBlock = response.data;
                },
            (error) => {
                    //handle errors
                    alert(error);
                }   
            );

因为this的上下文在回调中丢失。在typescript中使用箭头函数来保留上下文!

calSvc.getMonthBlock(12, 2015, 1, this.deptId).then((response) => {
})