S'abonner à observable pour récupérer des données

Question

Mes connaissances sur les observables sont limitées, donc il pourrait être évident que ce que je fais de mal ici est évident.

À l'initialisation de mon composant Angular 2, cet appel se produit.

ngOnInit(): void { 
    this.route.paramMap 
     .switchMap((params: ParamMap) => this.userService.getUser(+params.get('id'))) 
     .subscribe(user => this.user = user); 
    console.info(this.user.id); 
} 

Ce appelle cette méthode de service:

getUser(id: number): Promise<User> { 
     let url = this.baseUserUrl + 'GetUserAsync?id=' + id; 
     return this.http.get(url) 
      .toPromise() 
      .then(resp => resp.json() as User); 
    }; 

Snippet du code html où l'objet utilisateur est utilisé

<div class="row padding-left"> 
    <div class="col-sm-6 base-info-container info-box-details"> 
     <table class="info-box"> 
      <tr> 
       <td>User Id: {{ user.id }}</td> 
       <td>Email: {{ user.email }}</td> 

      </tr> 
     </table> 
    </div> 
</div> 

Resp.json apporte certainement les données de retour, mais l'utilisateur variable n'est pas sur le composant est en cours de définition et je ne sais pas pourquoi.

Answer 1

Vous devrez peut-être utiliser l'opérateur de navigation sécurisé (Angular docs)?: user?.id; pendant que votre vue est rendue, vos données ne sont pas encore récupérées.

également dans votre cas d'utilisation j'utiliser un Resolver pour aller chercher données avant d'activer votre composant, voici comment:

// in your route module 
const userRoutes: Routes = [ 
    { 
    path: 'user/:id', 
    component: YourComponent, 
    resolve: { 
     user: UserResolverService 
    } 
]; 


// User Resolver Service 
import { Injectable } from '@angular/core'; 
import {ActivatedRouteSnapshot, Resolve} from '@angular/router'; 
import {UserService} from 'your.user.service'; 

@Injectable() 
export class UserResolverService implements Resolve<any> { 

    constructor(private userService: UserService) { } 

    resolve(route: ActivatedRouteSnapshot) { 
    return 
     this.userService.getUser(route.paramMap.get('id')); 
    } 

} 

// In your user component 

constructor (private route: ActivatedRoute) { }  

ngOnInit() { 
    // Your snapshot's data matching user you defined in your route resolve 
    this.user = this.route.snapshot.data['user']; 
} 

Ce grand article de Thoughtram explique bien: resolving-route-data-in-angular-2