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

标签 javascript angularjs ecmascript-6 ngtable angular-meteor

我正在尝试将我的代码重构为 ES6。我正在使用 angular-meteor 和 ng-table。重构前,数据显示在表格中。但是,重构为 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。模板中的表格使用 ctrl.itemTableParams 作为 ng-table 属性的值,它的 ng-repeatitem in $数据

有没有人知道为什么不调用 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;
      }
    });
  }
});

关于javascript - 未调用 ES6 angular-meteor ng-table getData 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39469068/

相关文章:

javascript - 如何在 REST API 查询上添加过滤器以查看 QnAmaker 的答案?

html - 如何在 TypeScript 中使用 DOMStringMap?

javascript - td 内的 DIV 找不到父级

javascript - 如何使用参数更改组件本地状态?

javascript - 3 网格布局 : fixed sidebars and fluid content

javascript - 如何使用 Google API 调整图表大小以适应父容器

javascript - 通过 jQuery 查找第一个不可见 block

javascript - 使用 angular-google-maps 指令与异步加载的 <markers> 不起作用

javascript - ES6 类中的访问器组合

javascript - 在类组件中绑定(bind)React实例方法