这是我第一次try 打字脚本和Angular ,我被一个问题困住了.

我用以下方式定义了一个模块控制器(.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"

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

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

谢谢

编辑:基于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) => {

})

Typescript相关问答推荐

为什么当类类型与方法参数类型不兼容时,该函数可以接受类类型

自定义挂钩上的React useState正在忽略提供的初始状态

将对象属性路径描述为字符串数组的类型

Tailwind CSS样式不在Svelte应用程序中呈现

从接口创建类型安全的嵌套 struct

了解TS类型参数列表中的分配

如何防止TypeScript允许重新分配NTFS?

当使用`type B = A`时,B的类型显示为A.为什么当`type B = A时显示为`any `|用A代替?

类型脚本泛型最初推断然后设置

如何将类型从变量参数转换为返回中的不同形状?

Typescript泛型类型:按其嵌套属性映射记录列表

TypeScrip界面属性依赖于以前的属性-针对多种可能情况的简明解决方案

TS如何不立即将表达式转换为完全不可变?

错误TS2403:后续变量声明必须具有相同的类型.变量';CRYPTO';的类型必须是';CRYPATO';,但这里的类型是';CRYPATO';

如何将定义模型(在Vue 3.4中)用于输入以外的其他用途

Typescript 类型守卫一个类泛型?

Angular material 无法显示通过API获取的数据

如何定义这样一个TypeScript泛型,遍历路由配置树并累积路径

什么';是并类型A|B的点,其中B是A的子类?

TypeScript是否不知道其他函数内部的类型判断?