変数がメソッドで定義されていないのに、Typescriptのコンストラクターにない理由

AndrasCsanyi

Typescriptで1.4.9Angularjsを使用してアプリケーションを開発しています。

testManagementServiceサービスが注入されたコントローラーがあります。testManagementService変数はコンストラクターのオブジェクトですが、呼び出されるメソッドでは定義されていません。奇妙なことに、私は別のサービスを使用する別のコントローラーで同じセットアップを行っており、正常に動作しています。

問題:

  • testmgmgserviceというラベルの付いたconsole.logがコンストラクターにあり、testManagementService変数がgetTestSuiteTreeメソッドを持つRestangularオブジェクトであることが示されています。
  • kendo.data.TreeListDataSourceによって呼び出される/管理されるreadRepositoryメソッドのコンソールログは、this.testManagementServiceが未定義であることを示しています。

ここに画像の説明を入力してください

私がこれまでにしたこと:

  • 構文を確認しましたが、何かを見逃している可能性があります->いいえ
  • 変数名を別の名前に変更して、それを上書きする他の変数があるかどうかを確認しました->同じ結果
  • 私は長い睡眠をとりました、時々助けます->新しい考えはありません
  • Vs2013とVS2015の両方でコードをコンパイルしました->同じ結果

サービス

module sayusiando.gonogo.web.spa.service {
    import IGeneralTestSuitTestCaseContract = sayusiando.gonogo.web.spa.common.contracts.IGeneralTestSuitTestCaseContract;
    "use strict";

    export interface ITestManagementService {

        getTestSuitTree(): ng.IPromise<IGeneralTestSuitTestCaseContract[]>;

    }

    class TestManagementService implements ITestManagementService {

        //#region ctor
        constructor(
            private Restangular: restangular.IService
        ) { }
        //#endregion

        public getTestSuitTree(): ng.IPromise<IGeneralTestSuitTestCaseContract[]> {

            var resource = this.Restangular.all("TestSuite/GetTestSuiteTree");

            return <any>resource.getList();

        }

    }

    factory.$inject = ["Restangular"];

    function factory(Restangular: restangular.IService) {
        return new TestManagementService(Restangular);
    }

    angular
        .module("goNoGo")
        .factory("testManagementService", factory);

}

コントローラー

module sayusiando.gonogo.web.spa.mainpage.showtestsuittree.controllers {
    import IGeneralTestSuitTestCaseContract = sayusiando.gonogo.web.spa.common.contracts.IGeneralTestSuitTestCaseContract;
    import DataSourceTransport = kendo.data.DataSourceTransport;
    import DataSourceSchema = kendo.data.DataSourceSchema;
    import DataSourceSchemaModelFields = kendo.data.DataSourceSchemaModelFields;
    import TestManagementService = sayusiando.gonogo.web.spa.service.ITestManagementService;
    "use strict";

    export interface IShowTestSuitTreeController {
        activate: () => void;
    }

    class ShowTestSuitTreeController implements IShowTestSuitTreeController {

        //#region Variables
        testSuiteTree = [];
        testSuiteTreeKendoTreeListOptions: kendo.ui.TreeListOptions = {};
        //#endregion

        //#region Inject and ctor
        static $inject: string[] = ['testManagementService'];

        constructor(
            private testManagementService: gonogo.web.spa.service.ITestManagementService
        ) {

            console.log('testmgmgservice', testManagementService);

            this.activate();

        }
        //#endregion

        activate(): void {

            var dataSourceTransport = <DataSourceTransport>{
                read: this.readRepository
            };

            var schema: DataSourceSchema = <DataSourceSchema>{
                model: {
                    id: "id",
                    parentId: "parentId",
                    fields: <DataSourceSchemaModelFields>{

                        id: { type: "number", editable: false, nullable: true },
                        name: { type: "string", editable: false, nullable: true }

                    }

                }

            };

            var dataSource = new kendo.data.TreeListDataSource({
                transport: dataSourceTransport,
                schema: schema,
                batch: true
            });


            var idColumn: kendo.ui.TreeListColumn = <kendo.ui.TreeListColumn>{
                field: "id",
                width: "100px"
            };
            var nameColumn: kendo.ui.TreeListColumn = <kendo.ui.TreeListColumn>{
                field: "name",
                width: "400px"
            };

            this.testSuiteTreeKendoTreeListOptions.dataSource = dataSource;
            this.testSuiteTreeKendoTreeListOptions.sortable = false;
            this.testSuiteTreeKendoTreeListOptions.editable = false;
            this.testSuiteTreeKendoTreeListOptions.columns = [
                idColumn,
                nameColumn
            ];

        }

        readRepository(e): any {

            console.log('testmgmt2', this.testManagementService);
            this.testManagementService.getTestSuitTree().then((result: Array<IGeneralTestSuitTestCaseContract>): void => {
                e.success(result);
            }, (reason: any): void => {
                e.error(reason);
            });

            return e;
        }

    }

    angular
        .module("goNoGo")
        .controller("showTestSuitTreeController", ShowTestSuitTreeController);
}

コントローラから生成されたJavaScript

var sayusiando;
(function (sayusiando) {
    var gonogo;
    (function (gonogo) {
        var web;
        (function (web) {
            var spa;
            (function (spa) {
                var mainpage;
                (function (mainpage) {
                    var showtestsuittree;
                    (function (showtestsuittree) {
                        var controllers;
                        (function (controllers) {
                            "use strict";
                            var ShowTestSuitTreeController = (function () {
                                function ShowTestSuitTreeController(testManagementService) {
                                    this.testManagementService = testManagementService;
                                    //#region Variables
                                    this.testSuiteTree = [];
                                    this.testSuiteTreeKendoTreeListOptions = {};
                                    console.log('testmgmgservice', testManagementService);
                                    this.activate();
                                }
                                //#endregion
                                ShowTestSuitTreeController.prototype.activate = function () {
                                    var dataSourceTransport = {
                                        read: this.readRepository
                                    };
                                    var schema = {
                                        model: {
                                            id: "id",
                                            parentId: "parentId",
                                            fields: {
                                                id: { type: "number", editable: false, nullable: true },
                                                name: { type: "string", editable: false, nullable: true }
                                            }
                                        }
                                    };
                                    var dataSource = new kendo.data.TreeListDataSource({
                                        transport: dataSourceTransport,
                                        schema: schema,
                                        batch: true
                                    });
                                    var idColumn = {
                                        field: "id",
                                        width: "100px"
                                    };
                                    var nameColumn = {
                                        field: "name",
                                        width: "400px"
                                    };
                                    this.testSuiteTreeKendoTreeListOptions.dataSource = dataSource;
                                    this.testSuiteTreeKendoTreeListOptions.sortable = false;
                                    this.testSuiteTreeKendoTreeListOptions.editable = false;
                                    this.testSuiteTreeKendoTreeListOptions.columns = [
                                        idColumn,
                                        nameColumn
                                    ];
                                };
                                ShowTestSuitTreeController.prototype.readRepository = function (e) {
                                    console.log('testmgmt2', this.testManagementService);
                                    this.testManagementService.getTestSuitTree().then(function (result) {
                                        e.success(result);
                                    }, function (reason) {
                                        e.error(reason);
                                    });
                                    return e;
                                };
                                //#endregion
                                //#region Inject and ctor
                                ShowTestSuitTreeController.$inject = ['testManagementService'];
                                return ShowTestSuitTreeController;
                            })();
                            angular
                                .module("goNoGo")
                                .controller("showTestSuitTreeController", ShowTestSuitTreeController);
                        })(controllers = showtestsuittree.controllers || (showtestsuittree.controllers = {}));
                    })(showtestsuittree = mainpage.showtestsuittree || (mainpage.showtestsuittree = {}));
                })(mainpage = spa.mainpage || (spa.mainpage = {}));
            })(spa = web.spa || (web.spa = {}));
        })(web = gonogo.web || (gonogo.web = {}));
    })(gonogo = sayusiando.gonogo || (sayusiando.gonogo = {}));
})(sayusiando || (sayusiando = {}));
//# sourceMappingURL=showTestSuitTreeController.js.map
アンドレアス・イェーグル

問題は、ここでフレームワークに関数参照を渡していることだと確信しています。

  var dataSourceTransport = <DataSourceTransport>{
      read: this.readRepository
  };

これを行うと、コンテキスト(これ)が失われます。ライブラリがreadRepository関数を呼び出すと、事前に関数を定義したコンテキストでは機能しなくなります。したがって、関数が呼び出さtestManagementServiceれたthisとき、は存在しません

次のように正しいコンテキストにバインドすることで、これを修正できます。

  var dataSourceTransport = <DataSourceTransport>{
      read: this.readRepository.bind(this)
  };

または、参照を渡すときに矢印関数を使用してこれをキャプチャします

  var dataSourceTransport = <DataSourceTransport>{
      read: (e) => this.readRepository(e)
  };

または、コールバックを矢印関数自体にして、登録をそのままにします。関数はプロトタイプに登録されなくなるため、影響に注意してください。

readRepository = (e) => {
    ...
}

詳細については、https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.htmlを確認してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

コンストラクターに設定された変数が別のメソッドで定義されていません

分類Dev

NSobjectクラスで宣言および定義されているビューコントローラクラスにpermeterizedメソッドが表示されない

分類Dev

パラメータがモデルではなくメソッド引数として直接定義されている場合、IHttpActionResultの結果はリクエスト本文パラメータのバインドに失敗します

分類Dev

メソッド/コンストラクターの最初のパラメーターに名前が付けられていないのはなぜですか?

分類Dev

インデックスのインスタンスの配列に変数が含まれているため、クラスメソッドを定義できないのはなぜですか?

分類Dev

Angularテストの$ scopeにメソッドが定義されていないのはなぜですか?

分類Dev

TypeScriptが、未定義の戻り値をチェックするifステートメントの後に変数が定義されていると判断できないのはなぜですか

分類Dev

automapperでこのオブジェクトにパラメータなしのコンストラクタが定義されていません

分類Dev

インスタンスメソッドが静的コンテキストで使用されている場合、javacが「エラー:クラスのメソッドを特定のタイプに適用できない」と出力するのはなぜですか?

分類Dev

クラスコンストラクターで使用される列挙型、クラス内のメソッドが参照変数を認識しない

分類Dev

クラスの定義でスコープが宣言されていない場合、CDIプロデューサーメソッドが機能しない

分類Dev

このthisがこのクラスメソッドで定義されていないのはなぜですか?

分類Dev

関数型プログラミングに関するいくつかの本では、インスタンスメソッドはコンパニオンオブジェクトで定義されたバイナリ関数に委任します。その背後にある実用的な理由はありますか?

分類Dev

モデルで定義されたクラスメソッドがコントローラーに表示されない

分類Dev

コンストラクターでこれをバインドしない場合、reactコンポーネントメソッドでこれが未定義ではなくwindow / global-envに解決される理由

分類Dev

setプロパティを使用してコンストラクター関数の実行コンテキストで定義された値を設定しても値が変更されない理由がわかりません

分類Dev

AndroidのListViewコントロールのために呼び出されていないアダプタのクラスgetViewメソッド()関数

分類Dev

コンストラクターでinheritedDocが定義されていないのはなぜですか?

分類Dev

定義値が#langラケット/ベースのラケットマクロにバインドされていないのはなぜですか?

分類Dev

JavaScript:コンストラクターで定義されていないメソッドでプロパティを使用していますか?

分類Dev

非常に定義されているインスタンス変数の未定義のメソッド?Rails

分類Dev

ASP.NET MVC:このオブジェクトにパラメーターなしのコンストラクターが定義されていません

分類Dev

Unity:このオブジェクトにはパラメーターなしのコンストラクターが定義されていません。

分類Dev

WPF、MVVM、PRISM-このオブジェクトにパラメーターなしのコンストラクターが定義されていません

分類Dev

IoC CastleWindsor-このオブジェクトにパラメーターなしのコンストラクターが定義されていません

分類Dev

メソッドがクラスc ++で定義されていない場合に、クラスオブジェクトでメソッドを使用する方法

分類Dev

Reactで、renderメソッドがコンポーネントインスタンスにバインドされているのにカスタムメソッドにはバインドされていないのはなぜですか?

分類Dev

MediaPlayerコンストラクターが定義されていないのはなぜですか?

分類Dev

'System.Collections.Generic.IList`1の型に対してパラメーターなしのコンストラクターが定義されていません

Related 関連記事

  1. 1

    コンストラクターに設定された変数が別のメソッドで定義されていません

  2. 2

    NSobjectクラスで宣言および定義されているビューコントローラクラスにpermeterizedメソッドが表示されない

  3. 3

    パラメータがモデルではなくメソッド引数として直接定義されている場合、IHttpActionResultの結果はリクエスト本文パラメータのバインドに失敗します

  4. 4

    メソッド/コンストラクターの最初のパラメーターに名前が付けられていないのはなぜですか?

  5. 5

    インデックスのインスタンスの配列に変数が含まれているため、クラスメソッドを定義できないのはなぜですか?

  6. 6

    Angularテストの$ scopeにメソッドが定義されていないのはなぜですか?

  7. 7

    TypeScriptが、未定義の戻り値をチェックするifステートメントの後に変数が定義されていると判断できないのはなぜですか

  8. 8

    automapperでこのオブジェクトにパラメータなしのコンストラクタが定義されていません

  9. 9

    インスタンスメソッドが静的コンテキストで使用されている場合、javacが「エラー:クラスのメソッドを特定のタイプに適用できない」と出力するのはなぜですか?

  10. 10

    クラスコンストラクターで使用される列挙型、クラス内のメソッドが参照変数を認識しない

  11. 11

    クラスの定義でスコープが宣言されていない場合、CDIプロデューサーメソッドが機能しない

  12. 12

    このthisがこのクラスメソッドで定義されていないのはなぜですか?

  13. 13

    関数型プログラミングに関するいくつかの本では、インスタンスメソッドはコンパニオンオブジェクトで定義されたバイナリ関数に委任します。その背後にある実用的な理由はありますか?

  14. 14

    モデルで定義されたクラスメソッドがコントローラーに表示されない

  15. 15

    コンストラクターでこれをバインドしない場合、reactコンポーネントメソッドでこれが未定義ではなくwindow / global-envに解決される理由

  16. 16

    setプロパティを使用してコンストラクター関数の実行コンテキストで定義された値を設定しても値が変更されない理由がわかりません

  17. 17

    AndroidのListViewコントロールのために呼び出されていないアダプタのクラスgetViewメソッド()関数

  18. 18

    コンストラクターでinheritedDocが定義されていないのはなぜですか?

  19. 19

    定義値が#langラケット/ベースのラケットマクロにバインドされていないのはなぜですか?

  20. 20

    JavaScript:コンストラクターで定義されていないメソッドでプロパティを使用していますか?

  21. 21

    非常に定義されているインスタンス変数の未定義のメソッド?Rails

  22. 22

    ASP.NET MVC:このオブジェクトにパラメーターなしのコンストラクターが定義されていません

  23. 23

    Unity:このオブジェクトにはパラメーターなしのコンストラクターが定義されていません。

  24. 24

    WPF、MVVM、PRISM-このオブジェクトにパラメーターなしのコンストラクターが定義されていません

  25. 25

    IoC CastleWindsor-このオブジェクトにパラメーターなしのコンストラクターが定義されていません

  26. 26

    メソッドがクラスc ++で定義されていない場合に、クラスオブジェクトでメソッドを使用する方法

  27. 27

    Reactで、renderメソッドがコンポーネントインスタンスにバインドされているのにカスタムメソッドにはバインドされていないのはなぜですか?

  28. 28

    MediaPlayerコンストラクターが定義されていないのはなぜですか?

  29. 29

    'System.Collections.Generic.IList`1の型に対してパラメーターなしのコンストラクターが定義されていません

ホットタグ

アーカイブ