Angular2服务订阅不起作用

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; 
     } 



    } 

Web服务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(...)或其他运算符（如）的回调。

之后立即调用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 
     );