2016-09-13 11 views
12

Próbuję zmienić kod na ES6. Używam kątowego meteoru i tabeli ng. Przed refaktoryzacją dane są pokazane w tabeli. Jednak po refaktoryzacji do składni ES6 dane nie są już wyświetlane. Jest to urywek refactored kodu:ES6 kąt-meteor ng-table funkcja getData nie nazywana

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 jest uzyskiwanie zaludnionych ale getData nie nazywa uzyskiwanie. Tabela w szablonie używa wartości ctrl.itemTableParams jako wartości atrybutu ng-table, a jej ng-repeat to item in $data.

Czy ktoś ma pomysł, dlaczego funkcja getData nie jest wywoływana? Pomoc byłaby bardzo ceniona. Dzięki!

P.S. Gdy próbuję ustawić NgTableParams na const tableParams, a następnie wywołać funkcję reload(), zostanie wywołana . Ale chodzi o to, że nie renderuje danych na stole. Ustawić tabelę jako:

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> 

Podczas logowania danych w getData, że ma w nim przedmiotów. Ale, jak powiedziałem, to nie jest renderowanie w tabeli.

+0

Czy występują błędy w konsoli? Twoja metoda 'items' wywołuje' this.myService.getItems() ', ale usługa ma metodę' getInputs', a nie 'getItems'. Czy jest to literówka w pytaniu dotyczącym SO, czy też jest w twojej aplikacji? – noppa

+0

@ noppa Przepraszam, to był literówka w pytaniu, a nie aplikacja. – dork

Odpowiedz

3

Najwyraźniej, po prostu trzeba zwrócić dane w getData. Stare dokumenty używały $defer.resolve i nie zwracały rozstrzygniętych danych. Obecna wersja (1.0.0) już jej nie używa.

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

Metoda getData nie jest wywoływana, ponieważ pobieramy asynchronicznie data, ale używamy jej synchronicznie. Tak więc, gdy sterownik jest załadowany początkowo, wywoływana jest getData z nierozwiązanymi danymi.

Aby rozwiązać ten problem, musisz stworzyć NgTableParams w zwrotnego sukcesu obiektu data:

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

czy jest to ważne dla 'meteoru kątowego'? Próbowałem to zrobić i '$ obietnica' jest niezdefiniowana. – dork

Powiązane problemy