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