NgTable在组件/模板中不起作用

Question

我使用的是组件/模板的方式，而不是控制器/视图的方式，除了Ngtable之外，它可以正常工作。

这是我尝试过的

我的组件代码：

function fn($scope, $http, $routeParams, $timeout, $location, utils,$window, NgTableParams) {
    //'ngInject';

    var self = this;



    utils.addBasicFunctions(this);

    this.$onInit = function () {
        this.init();
    }

    this.init = async function () {

        try {

            this.pageInfo = await utils.getKycInfo($http, $routeParams, $location, $timeout);

            this.refreshPhoneTable(this.pageInfo.kyc.phoneNumbers)

            console.log(this.pageInfo.kyc.phoneNumbers)

             $scope.$apply();

        } catch (error) {
            console.log("init", error);
            //   $location.path("/error/There was an error in mktpExporterSettings");
        }

    };


          /**
         * This updates the data in the phones table
         * @function refreshPhoneTable
         */

        this.refreshPhoneTable = function (numbers) {
            console.log(numbers)
            this.phoneNumbers = new NgTableParams({
                page: 1,
                count: 10
            }, {
                    total: numbers,
                    counts: [],
                    getData: function (params) {
                        this.data = numbers.slice((params.page() - 1) * params.count(), params.page() * params.count());
                        console.log(  this.data)
                        return this.data;

                    }
                });

        };





}

angular.
    module('kycformCompanyaddress').
    component('kycformCompanyaddress', {
        templateUrl: 'components/kycform-companyaddress/kycform-companyaddress-template.html',
        controller: fn,
        controllerAs: 'ctrl'
    });

和模板：

<div class="col-md-4">
                            <input name="phone" type="text" id="phone" ng-disabled="disableIfnotOngoing() ||  !ctrl.pageInfo.kyc.phoneTitle" class="input"
                                ng-model="ctrl.pageInfo.kyc.phone" required>
                            <label  class="labelInput"  for="country">{{ctrl.gs("phone", "Phone Number")}}</label  >
                        </div>

                        <div ng-show="ctrl.pageInfo.kyc.phone" class="col-md-2">

                            <i style="font-size:30px;color:rgb(109, 109, 109); float:left; margin-top:12px" ng-click="addPhone();  ctrl.checkFormCompletion('addressCompany')"
                                class="fa fa-plus" aria-hidden="true"></i>
                        </div>

                    </div>

                    <div>

                        <table   width="100%"  ng-table="ctrl.phoneNumbers" class="phonetable">
                            <tr ng-repeat="phone in data">
                                <td>
                                    {{phone.phoneTitle}} &nbsp; &nbsp;{{phone.phone}}
                                </td>

                                <td>
                                    <i style="color:#989898" class="fa fa-trash" style="font-size:16px" ng-click="ctrl.deleteNumber(phone.phone)"></i>
                                </td>
                            </tr>
                        </table>



                    </div>
                </div>

            </div>

我已经尝试了一切，但是ngtable不能正常工作，我做错了什么？

请注意，this.phoneNumbers将数据显示为

{"data":[
    {"phoneTitle":"Phone1","phone":"+961999926",
     "_id":"5c790f25ca273e2fe45a00a0"},   
    {"phoneTitle":"Phone2","phone":"+961999927",
     "_id":"5c790f25ca273e2fe45a009f"}
]}