Bonjour a tous,

J'ai décidé de découvrir Angular2 et nodeJS,
Afin de m'exercer apres avoir suivi le tuto sur le site d'Angular2 et apres avoir parcouru la doc j'ai décidé de coder une petite appli de gestion d'utilisateurs, me permettant de lister, d'ajouter, modifier et supprimer des utilisateurs stocker dans une base MySQL accessible via une api codé en nodeJS.

Apres m'etre connecté a mon appli j'aimerai être redirigé sur la vue du component listant mes utilisateurs,
le problème étant qu'apres m'être connecté je suis bien redirigé sur la page souhaité mais la liste de mes utilisateurs n'est pas affiché, alors que la fonction est bien appelé lors de l'initialisation de mon component.
Je suis obligé d'effectué une autre action sur la page (clicker sur le lien de la page, clicker sur le bouton d'ajout d'utilisateur, etc..) comme dans cet exemple afin que la liste s'affiche comme par magie.

Quelque chose doit m'échappé mais rien a faire j'ai besoin d'aide :

Ce que je fais

Voila premierement le code de mon component faisant simplement appel a mon service afin de récupéré mes utilisateurs et de pouvoir les sélectionner en cliquant dessus :

import { Component, OnInit, Input, OnChanges }          from '@angular/core';
import { User }                             from '../class/user'
import { Observable, BehaviorSubject}       from "rxjs";
import { UserService }                      from '../services/user.service';
import { UserDetailsComponent }             from  '../user-details/user-details.component'

@Component({
  moduleId: module.id,
  selector: 'app-manage-users',
  templateUrl: 'manage-users.component.html',
  styleUrls: ['manage-users.component.css'],
  directives : [UserDetailsComponent]
})
export class ManageUsersComponent implements OnInit{

    errorMessage : string;
    addingUser : boolean ;
    users : User[];
    user : User ;
    selectedUser : User;

    constructor(private userService : UserService) { }

    addUser(){
        this.clear()
        this.addingUser = true;
    }

    close(res : string) {
        if(res === 'saved' || res === 'deleted' || res === 'updated') {
            this.getUsers();
        }
    }

    getUsers() { 
        this.userService
            .getUsers()
            .subscribe((res) => { 
                if (res.users){
                    this.users = res.users;
                    console.log(this.users)
                } else {

                    this.errorMessage = res.error
                }
            });
            console.log('getusers : '+ this.users)
    }

    getUser(id : number){
        this.userService.getUser(id)
                        .subscribe((res) => {   
                            this.user = res.user
                        })
    }

    ngOnInit(): void {
        this.getUsers();
    }

    onSelect(user? : User) {
        this.clear()
        this.selectedUser = user;
    }

    clear(){
        this.selectedUser = null;
        this.addingUser = false;
    }
}

le code de mon template :

<div class="col-xs-6 list-box">
    <ul class="users" *ngIf="users != undefined">
        <li *ngFor="let user of users" (click) = "getUser(user.id); onSelect(user)" [class.selected]="user === selectedUser" class="button-item-list">{{user.username}}</li>
    </ul>

    <ul class="add-user">
        <li class="button-add-user button-item-list" (click) = "addUser()"> <i class="fa fa-user-plus" aria-hidden="true"></i>Add User</li>
    </ul>
</div>

C'est avec beaucoup de bonheur et de joie que j'accueillerai une solution a mon problème :)

5 réponses


Salut,

Tu peux suivre cette série de tutos, peut-être trouveras-tu ce que tu cherche : https://www.youtube.com/watch?v=mOD2sGp4V8o&list=PLs_WGRq69Uh3NBmrSmlXauDMhyt5eifd :)

Perso, je n'ai pas encore eu l'occaz de tester Angular 2.0, mais du peu que j'ai pu voir, tu as peut-être oublié d'inclure la directive For dans ta vue (via le décorateur @View):

@Component({ /* ... */ })
@View({
  directives: [For]
})

Bonjour, merci de la réponse tres rapide, malheuresement ça ne m'aide pas beaucoup car de ce que j'ai pu voir le decorateur view a été supprimé (Angular2 étant encore en beta des choses changent encore) j'ai suivi deja quelques tutos en anglais avec des personnes faisant des choses similaires, je pense donc que la structure du code doit etre bonne et que cela doit etre seulement un petit détail, sinon merci pour le tuto fr, il y a toujours des petites choses que je saute dans les tutos anglais :)

As tu quelque chose dans tes console.log ?

Oui tous mes logs fonctionnent, c'est seulement un probleme d'affichage de ma liste de users lors du chargement de la page

Hello,

J'arrive peut être un peu tard, mais il me semble avoir eu le même genre de soucis lors d'une précédente version.
J'utilisais le ngOnInit et ca faisais un peu buguer le truc. Par contre, j'utilisais par la suite ngAfterViewInit (quelque chose dans ce style là) qui est la callback de fin d'init de l'écran (appelé donc après ngOnInit) qui me permettait de passer outre ce bug.