ES6 angular-meteor ng-table getData函数未被调用

ES6 angular-meteor ng-table getData function not called

本文关键字：调用 函数 getData angular-meteor ng-table ES6      更新时间：2023-09-26

我正在尝试重构我的代码到ES6。我用的是角流星和ng表。在重构之前，数据显示在表中。然而，在重构到ES6语法之后，数据不再显示了。下面是重构后的代码片段:

class MyController {
    constructor($scope, $reactive, NgTableParams, MyService) {
        'ngInject';
        $reactive(this).attach($scope);
        this.subscribe('myCollection');
        this.myService = MyService;
        this.helpers({
            items() {
                return this.myService.getItems();
            },
            itemTableParams() {
                const data = this.getReactively('items');
                return new NgTableParams({
                    page: 1,
                    count: 10
                }, {
                    total: data.length,
                    getData: (params) => {
                        // not called
                    }
                });
            }
        });
    }
}
class MyService {
    getItems() {
        return MyCollection.find({}, {
            sort: {
                dateCreated: -1
            }
        });
    }
}
export default angular.module('MyModule', [angularMeteor, ngTable, MyService])
    .component('MyComponent', {
        myTemplate,
        controllerAs: 'ctrl',
        controller: MyController
    })
    .service('MyService', MyService);

const data被填充，但getData没有被调用。模板表中ng-table属性值为ctrl.itemTableParams, ng-repeat为item in $data。

有没有人有一个想法，为什么getData函数不调用?非常感谢你的帮助。谢谢!

注:当我尝试将NgTableParams设置为const tableParams，然后调用reload()函数时，getData被触发。但问题是，它并没有呈现表格上的数据。我将表设置为:

itemTableParams() {
    const data = this.getReactively('items');
    const tableParams = new NgTableParams({
        page: 1,
        count: 10
    }, {
        total: data.length,
        getData: (params) => {
        }
    });
    tableParams.reload(); // triggers the getData function
    return tableParams;
}

<table ng-table="ctrl.itemTableParams">
    <tr ng-repeat="item in $data track by $index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.dateCreated}}</td>
    </tr>
</table>

当我在getData中记录数据时，它在其中有项目。但是，就像我说的，它不是在表格中呈现的

显然，您只需要返回getData中的数据。旧的文档使用$defer.resolve，没有返回解析的数据。当前版本(1.0.0)不再使用它。

this.helpers({
  items() {
    return this.myService.getItems();
  },
  itemTableParams() {
    const data = this.getReactively('items');
    return new NgTableParams({
      page: 1,
      count: 10
    }, {
      total: data.length,
      getData: (params) => {
        const filteredData = filterData(data); // do something
        return filteredData;
      }
    });
  }
});

getData方法没有被调用，因为您异步获取data，但同步使用它。因此，当初始加载控制器时，getData被调用，并带有未解析的数据。

要解决这个问题，您需要在data对象的成功回调中创建NgTableParams:

data.$promise.then((data) => {
 // create NgTableParams here
});
相关文章：