Angular2 Service Подписаться не работает

Question

Я не могу хранить данные в объекте UserDetailsArr, PFB-код для вашей справки.

пользователя Класс детали:

export class UserDetails 
    { 
     userId:string; 
     userName:string; 
     password:string; 
     firstName:string; 
     lastName:string; 
     mobileNumber:string; 
     email:string 
    } 

Класс обслуживания:

import {Component} from '@angular/core' 
    import {OnInit} from '@angular/core' 
    import {UserService} from './user.service' 
    import {User} from './user' 
    import {UserDetails} from './user' 
    import {UserDetailComponent} from './user-detail.component' 
    import {HTTP_PROVIDERS} from '@angular/http'; 

    @Component(
     { 
      selector:'user-list', 
      template: ` 
       <br/><br/><br/> 
       <div> 
       <table border='1'> 
       <thead> 
        <tr> 
         <th>First Name </th> 
         <th>Last Name </th> 
         <th>Mobile Number </th> 
         <th>Email </th> 
        </tr> 
       </thead> 
         <tr *ngFor="let user of UserDetailsArr"> 
         <td> <span (click)="showDetails(user)"> {{user.firstName}} </span> </td> 
         <td> {{user.lastName}} </td> 
         <td> {{user.mobileNumber }} </td> 
         <td> {{user.email}} </td> 
        </tr>      
       </table> 
       </div> 
       <user-detail *ngIf = "selectedUser != null" [user] = "selectedUser"></user-detail> 
       <br/><br/><br/> 

      `, 
      providers:[UserService , HTTP_PROVIDERS], 
      directives:[UserDetailComponent] 
     } 
    ) 
    export class UserListComponent implements OnInit 
    { 
     users:User[]; 
     UserDetailsArr: UserDetails[]= []; 
     errorMessage: string = ''; 
     isLoading: boolean = true; 
     public selectedUser = null; 
     constructor(private _userService:UserService) 
     { 

     } 

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

     getUsers() 
     { 

      this._userService.getUsers() 
        .subscribe(
         /* happy path */ p => this.UserDetailsArr = p, 
         /* error path */ e => this.errorMessage = e, 
         /* onComplete */() => this.isLoading = false);     


      console.log(this.UserDetailsArr); 
     } 

     showDetails(user) 
     { 
      this.selectedUser = user; 
     } 



    } 

веб-служба работает perfecltly Если я вхожу, как показано ниже,

this._userService.getUsers() 
      .subscribe(
       /* happy path */ p => console.log(JSON.stringify(p), 
       /* error path */ e => this.errorMessage = e, 
       /* onComplete */() => this.isLoading = false)); 

пользовательские данные вошли в консоли браузера ,

[{"UserId":"bcb444aa-401b-48a7-b1bf-17b4bf78b834","UserName":"prabhu","Password":"pwd","FirstName":"PRABHU","LastName":"ARUMUGAM","MobileNumber":"1234567890","Email":"prabhu@gmail.com"}, 
    {"UserId":"d9e5ba40-d0d7-4d90-89b0-7e26660cc84b","UserName":"senthil","Password":"pwd","FirstName":"SENTHIL","LastName":"KUMAR","MobileNumber":"1234567890","Email":"senthil@gmail.com"}, 
    {"UserId":"a59dabad-5a8c-4ced-9006-2181bf8c10cb","UserName":"vijay","Password":"pwd","FirstName":"VIJAY","LastName":"RAJ","MobileNumber":"1234567890","Email":"vijay@gmail.com"}, 
    {"UserId":"f3e2d351-9413-4d80-8623-36556d27f875","UserName":"thamizh","Password":"pwd","FirstName":"THAMIZH","LastName":"VANAN","MobileNumber":"1234567890","Email":"thamizh@gmail.com"}] 
    (e) { return _this.errorMessage = e; }() { return _this.isLoading = false; } 

Но если я назначу данные с данными UserDetailsArr не назначен,

 this._userService.getUsers() 
      .subscribe(
       /* happy path */ p => this.UserDetailsArr = p, 
       /* error path */ e => this.errorMessage = e, 
       /* onComplete */() => this.isLoading = false); 
    console.log(this.UserDetailsArr); 

Следующая строка я пытался напечатать, но его не работает, результат не определен.

Answer 1

Наблюдаемые вызовы обращаются к subscribe(...) или другим операторам, например map(...), когда поступают данные.

Код после subscribe(...) вызывается сразу же после этого и, как упоминалось в @JbNizet, это обычно задолго до того, как данные поступают.

Вы должны переместить код, который зависит от данных, полученных от наблюдаемой в одном из обратных вызовов, таких как:

this._userService.getUsers() 
     .subscribe(
      /* happy path */ p => { 
       this.UserDetailsArr = p; 
       console.log(this.UserDetailsArr); 
      }, 
      /* error path */ e => this.errorMessage = e, 
      /* onComplete */() => this.isLoading = false 
     );