ES6 angulaire-météore ng-table Fonction getData non appelée

Question

J'essaye de refactoriser mon code en ES6. J'utilise angular-météore et ng-table. Avant le refactoring, les données sont affichées sur la table. Cependant, après refactoring à la syntaxe ES6, les données ne sont plus affichées. Ceci est un extrait du code refondus:

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

Le const data devient peuplé mais getData n'est pas appelé. La table dans le modèle utilise ctrl.itemTableParams comme valeur pour l'attribut ng-table et sa ng-repeat est item in $data.

Est-ce que quelqu'un a une idée de pourquoi la fonction getData n'est pas appelée? De l'aide serait grandement appréciée. Merci!

P.S. Lorsque j'essaie de définir NgTableParams sur const tableParams, puis d'appeler la fonction reload(), getData est déclenchée. Mais la chose est, ce n'est pas de rendre les données sur la table. Je mis la table:

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> 

Lorsque je me connecte les données getData, il a des éléments qu'il contient. Mais, comme je l'ai dit, ce n'est pas rendu dans la table.

Answer 1

Apparemment, il vous suffit de renvoyer les données dans getData. Les anciens documents utilisaient $defer.resolve et ne renvoyaient pas les données résolues. La version actuelle (1.0.0) ne l'utilise plus.

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

Answer 2

La méthode getData n'est pas appelée car vous récupérez le data de manière asynchrone mais l'utilisez de manière synchrone. Ainsi, lorsque le contrôleur est chargé initialement, getData est appelé avec des données non résolues.

Pour résoudre ce problème, vous devez créer le NgTableParams dans le rappel de la réussite de l'objet data:

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