web-dev-qa-db-ja.com

"this"がType promiseモジュールでhttpプロミスで定義されていない理由

これは私の最初のTypeScriptであり、angularの試みであり、1つの問題で立ち往生しています。

次の方法で定義されたモジュールコントローラーがあります（.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"が未定義である理由を理解できません。関数で囲まれているためだと思います。

コントローラのTypeScriptクラスのcalBlockプロパティにreponse.data（$ http呼び出しからのjson配列）を割り当てる方法が必要です。誰かが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);
                }   
            );
javascriptangularjstypescript
17
J King

thisのコンテキストがコールバックで失われるためです。 TypeScriptで矢印関数を使用して、コンテキストを保持します！

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

})
40
tymeJV