javascript - ตัวแปรสโคปไม่กำหนดค่าในคลาสคอนโทรลเลอร์ AngularJS TypeScript ของไดเร็กทีฟ

ฉันได้สร้าง directive แบบ wrapper เหนือ ag grid ดังนี้

function MyDirective(): ng.IDirective {
    var directive = <ng.IDirective>{
        restrict: "E",
        template: '<div style="width: 100%; height: 400px;" ag-grid="vm.agGridOptions" class="ag-fresh ag-basic"></div>',
        scope: { gridOptions: '=', rowClicked: "&", api: '=' },
        controller: gridController,
        controllerAs: 'vm',
        bindToController: true
    }
    return directive;
}
angular.module("angularWithTS").directive("myDirective", MyDirective);

คลาสคอนโทรลเลอร์ของฉันมีลักษณะดังนี้:

 export class gridController {
    public agGridOptions: any = {};
    public api: any = {};
    public gridOptions: any;
    public rowClicked: any;
    constructor() {
        this.Process();
    }
    private Process() {
        /*****Contoller Logic*****/
        var columnDefs = commonFunctions.convertToAgColumns(this.gridOptions.columnDefinitions);

        this.agGridOptions.enableSorting = true;
        this.agGridOptions.editable = true;
        this.agGridOptions.enableColResize = true;
        this.agGridOptions.columnDefs = columnDefs;
        /*****Contoller Logic*****/

        /*****Exposed Events*****/
        this.agGridOptions.onRowClicked = function (event) {
            this.rowClicked({ index: event.rowIndex });
        };
        /*****Exposed Events*****/


        /*****Public Api*****/
        this.api = {
            populateData: function (options) {
                this.agGridOptions.api.setRowData(options.rowData);
            }
        }
    }
    /*****Public Api*****/
}

แท็กไดเรกทีฟของฉันใน HTML มีลักษณะดังนี้

<my-directive grid-options="options" api="gridApi"></my-directive>

คำถาม: เมื่อผมพยายามเรียกใช้เมธอด API populateData() ตัวแปรในสโคปของคอนโทรลเลอร์เช่น agGridOptions จะเป็น undefined จากนั้นส่วนที่เหลือก็ไม่ทำงาน ทำไมตัวแปร agGridOptions ถึงไม่สามารถใช้งานได้เมื่อผมเรียกใช้ public api ? กรุณาช่วยด้วย.. มันทำงานได้ปกติเมื่อผมเขียนตามวิธีเขียนฟังก์ชัน JS ปกติของคอนโทรลเลอร์ แต่ไม่ทำงานกับคอนโทรลเลอร์คลาส TypeScript จะขอบคุณมากสำหรับความช่วยเหลือ

ฉันกำลังเรียกใช้เมธอดของคอนโทรลเลอร์ดังนี้:

     $scope.gridApi = {};
  $scope.options = {};
            $scope.options.columnDefinitions = $scope.columnDefinitions;
    $http.get("monthlySales.json").then(function (response) {
        $timeout(function () {          
            $scope.options.rowData = response.data;
            $scope.gridApi.populateData($scope.options);
        },2000);
    });    

เมื่อคอนโทรลเลอร์ถูกเรียกใช้งานครั้งแรก ค่าทั้งหมดของตัวแปรในคอนโทรลเลอร์เช่น gridOptions, agGridOptions จะถูกดึงมาอย่างถูกต้อง แต่ agGridOptions กลับได้ค่าเป็น undefined เมื่อฉันเรียกใช้ api populateData เพื่อแสดงข้อมูลที่ดึงมา

คำตอบ #1

'this' ที่คุณเรียกในฟังก์ชันของคุณหมายถึงฟังก์ชันนั้นเอง ไม่ใช่คอนโทรลเลอร์ของคุณ

this.api = {
        populateData: function (options) {
            this.agGridOptions.api.setRowData(options.rowData); //(this = populateData function)
        }
    }

ไวยากรณ์ควรถูกเปลี่ยนเป็น() => (นี่จะทำให้คอมไพเลอร์ TypeScript 'โอน' this มันจะกลายเป็น _this ในไฟล์ js)

มันควรดูเหมือนแบบนี้:

this.api.populateData =  (options)=> {
            this.agGridOptions.api.setRowData(options.rowData);    
    }