changer l'attribut d'un composant dans une méthode d'abonnement

Question

J'utilise angular4 pour développer ma partie frontale.J'ai un service qui retourne un observable auquel je veux m'abonner dans mon composant.Alors comment puis-je changer l'attribut du composant après le chargement les données dans la méthode subscribe et rester même après la méthode ngOnInit et ne pas revenir à sa valeur par défaut. Ce est le code de mon composant:

import {CreateUserComponent} from '../create-user/create-user.component'; 
import {UpdateUsersCredentialsComponent} from '../update-users-credentials/update-users-credentials.component'; 
import { Component, OnInit, AfterViewInit } from '@angular/core'; 
import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material'; 
import{UsersListService} from '../shared/users-list.service' 
import { User } from 'app/pages/Users/shared/user'; 
@Component({ 
    selector: 'vr-users-list', 
    templateUrl: './users-list.component.html', 
    styleUrls: ['./users-list.component.scss'] 
}) 
export class UsersListComponent implements OnInit,AfterViewInit { 
    private users:any[]=["1","2","3"]; 
    private selectedUser:User; 
    constructor(public dialog: MdDialog,private userListService: UsersListService) { 
    } 

    public get $selectedUser(): User { 
     return this.selectedUser; 
    } 

    public set $selectedUser(value: User) { 
     this.selectedUser = value; 
    } 

    ngOnInit() { 

     this.userListService.getUserList().subscribe (
    data =>{ 
    console.log("those are data "+data.length);  
    this.users=data; 


}); 


    } 
    ngAfterViewInit(){ 
    this.userListService.getUserList().subscribe (
     data =>{ 
     console.log("those are data "+data.length);  
     this.users=data; 


    }); 

    } 
    openUsersDetails() { 


    let config = new MdDialogConfig(); 
    let dialogRef:MdDialogRef<UpdateUsersCredentialsComponent> = this.dialog.open(UpdateUsersCredentialsComponent, config); 
    dialogRef.componentInstance.email =this.selectedUser.$email; 
    } 
    openCreateUser() { 
    this.dialog.open(CreateUserComponent); 
    } 

} 

c'est la méthode getListeUtilisateurs

getUserList(){ 
    //this method is returning the items 
      return this.http.get(this.usersUrl) 
      .map(res => { 
       this.users=res['items']; 
       return this.users; 
      }); 

     } 

Answer 1

Je pense que vous utilisez ngAfterViewInit() pour faire un autre abonnement afin de mettre à jour les utilisateurs droit variable? Lorsque vous injectez votre instance de service sur le constructeur, vous pouvez accéder directement à la variable 'this.users' du service sur votre modèle et dans votre composant. Par exemple:

Sur votre service, il suffit d'utiliser la méthode getListeUtilisateurs pour enregistrer la réponse sur les utilisateurs variables, comme vous le voyez, sans une déclaration de retour:

getUserList(){ 
//this method is returning the items 
     return this.http.get(this.usersUrl) 
     .map(res => { 
      this.users=res['items']; 
     }); 

    } 

Sur le composant que vous pourriez faire une fonction:

getUsersFromService() { 
    return this.userListService.users 
} 

Et puis, chaque fois que vous avez besoin d'accéder à cette variable vous devez appeler getUsersFromService()

vous pouvez également accéder à userListService.users sur le t mais si vous faites une compilation AOT, vous obtiendrez des erreurs car userListService est une variable privée.

Si vous devez faire une autre requête GET à votre back-end il suffit d'appeler la fonction comme celui-ci sur votre composant:

refreshUsers() { 
    this.userListService.get().subscribe() 
} 

Cette méthode de rafraîchissement des utilisateurs variables du service (et vous verrez que la valeur pourrait changer sur votre template parce que c'est un Observable)