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

Posted 2023-02-22

【中文标题】ES6 angular-meteor ng-table getData 函数未调用

【英文标题】：ES6 angular-meteor ng-table getData function not called

【发布时间】：2017-01-20 23:57:35

【问题描述】：

我正在尝试将我的代码重构为 ES6。我正在使用 angular-meteor 和 ng-table。在重构之前，数据显示在表格中。但是，在重构为 ES6 语法后，数据不再显示。这是重构代码的sn-p：

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 没有被调用。模板中的表格使用ctrl.itemTableParams 作为ng-table 属性的值，其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 中记录数据时，其中包含项目。但是，就像我说的，它没有在表格中呈现。

【问题讨论】：

控制台中是否出现任何错误？您的items 方法调用this.myService.getItems()，但服务有一个方法getInputs，而不是getItems。这是在 SO 问题中的错字还是在您的实际应用中也是如此？

@noppa 抱歉，这是问题中的拼写错误，而不是应用程序。

【参考方案1】：

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

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

data.$promise.then((data) => 
 // create NgTableParams here
);

【讨论】：

这对angular-meteor 有效吗？我试过这样做，$promise 未定义。

【参考方案2】：

显然，您只需返回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;
      
    );
  
);