Trigger Angular 2 tuyau après rafraîchissement de la page avec des données de la promesse

Question

Dans mon application, j'ai une table qui est remplie par un tableau et où j'utilise un filtre. Dans un OnInit, une promesse est appelée pour obtenir les données. Maintenant, le problème est qu'après une actualisation, la valeur de _projects (et le paramètre d'entrée de la transformation) n'est pas définie et rien n'est affiché dans la table. Lorsque je clique sur une liste déroulante, la fonction de transformation est déclenchée et la table est remplie. Existe-t-il un moyen de déclencher le canal lorsque _projects est défini dans la promesse? J'ai aussi essayé avec des pipes pures/impures.

this._projectService.getProjectsPromise().done(
    function (jsdo, success, request){ 
     that._projects = request.response[HorizonData.dsProjects][HorizonData.dsProjects][HorizonData.ttProjects]; 
     for (let project of that._projects) { 
      project.WhenWhoCreatedFull = project.WhenWhoCreated 
      var whenwho = project.WhenWhoCreated.split(" "); 
      project.WhenWhoCreated = whenwho[0] + " " + whenwho[2]; 
     } 
    }     
) 

Dans mon component.html

<tr title="{{ project.INFO }}" *ngFor="let project of _projects | projectFilter: filtered"> 

tuyau angulaire:

transform(value: IProject[], filterBy: IProject): IProject[] { 
    return filterBy && value ? value.filter((project: IProject) => 
     (project.projectnr.toLowerCase().indexOf(filterBy.projectnr.toLowerCase()) !== -1) 
     && (project.projectname.toLowerCase().indexOf(filterBy.projectname.toLowerCase()) !== -1) 
     && (project.clientnr.toLowerCase().indexOf(filterBy.clientnr.toLowerCase()) !== -1) 
     && (project.clientname.toLowerCase().indexOf(filterBy.clientname.toLowerCase()) !== -1) 
     && (filterBy.statusdesc.indexOf(project.statusdesc) !== -1)) : value; 
} 

Answer 1

Oui! Il existe plusieurs façons de le faire, en fonction de votre utilisation.

1. Après avoir défini la nouvelle valeur de _.projects, vous pouvez faire un appel manuel angulaire pour déclencher la détection de changement, comme indiqué in this previous answer. Bien que ce soit certainement le plus facile à implémenter, il nécessite beaucoup plus de calculs de la part de votre navigateur, et conduira probablement à une application plus lente.

2. Vous pouvez refactoriser votre code afin que _.projects soit lui-même une promesse et ensuite utiliser le async pipe angulaire pour gérer les mises à jour. Ceci est également relativement facile, et a l'avantage d'être moins de ressources sur la fin de Angulaire:

this._projects = this._projectService.getProjectsPromise().then(
 
    function(jsdo, success, request) { 
 
    var projects = request.response[HorizonData.dsProjects][HorizonData.dsProjects][HorizonData.ttProjects]; 
 
    for (let project of projects) { 
 
     project.WhenWhoCreatedFull = project.WhenWhoCreated 
 
     var whenwho = project.WhenWhoCreated.split(" "); 
 
     project.WhenWhoCreated = whenwho[0] + " " + whenwho[2]; 
 
    } 
 
    
 
    return projects; 
 
    } 
 
)

<tr title="{{ project.INFO }}" *ngFor="let project of (_projects | async) | projectFilter: filtered">

3. promesses, dans l'ensemble, ne sont pas les meilleurs pour traiter les données réactives, car après qu'ils ont résolu, plus de données peuvent être mises à jour. Alors que cela nécessiterait beaucoup plus de refactoring que juste ce morceau de code, je chercherais dans RxJS - c'est une bibliothèque pour créer des observables, qui sont des flux de données réactifs. C'est beaucoup mieux pour votre code dans son ensemble, donc si vous avez l'option de refactoriser pour utiliser RxJS, je le ferais.