dork dork - 2 months ago 25
AngularJS Question

ES6 angular-meteor ng-table getData function not called

I'm trying to refactor my code to ES6. I'm using angular-meteor and ng-table. Before refactoring, the data is shown on the table. However, after refactoring to ES6 syntax, the data doesn't show anymore. This is a snippet of the refactored code:

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);


The
const data
is getting populated but
getData
isn't getting called. The table in the template is using
ctrl.itemTableParams
as the value for
ng-table
attribute and its
ng-repeat
is
item in $data
.

Does anyone have an idea as to why the
getData
function isn't called? Help would be greatly appreciated. Thanks!

P.S.
When I try to set
NgTableParams
to a
const tableParams
, and then call the
reload()
function,
getData
is triggered. But the thing is, it's not rendering the data on the table. I set the table as:

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>


When I log the data in
getData
, it has items in it. But, like I said, it's not rendering in the table.

Answer

Apparently, you just need to return the data in getData. The old docs were using $defer.resolve and was not returning the resolved data. The current version (1.0.0) isn't using it anymore.

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;
      }
    });
  }
});