我试图将我的代码重构为ES6。我使用角度流星和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-repeat
为item in $data
。
有没有人知道为什么getData
函数没有被调用?非常感谢帮助。谢谢!
P.S。
当我尝试将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
中记录数据时,其中包含项目。但是,就像我说的那样,它没有在表格中呈现。
答案 0 :(得分:3)
显然,您只需要在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;
}
});
}
});
答案 1 :(得分:0)
未调用getData
方法,因为您异步获取data
但同步使用它。因此,当最初加载控制器时,将使用未解析的数据调用getData
。
要解决此问题,您需要在NgTableParams
对象的成功回调中创建data
:
data.$promise.then((data) => {
// create NgTableParams here
});