angularjs - 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 服务工作正常 如果我像下面这样登录，

   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

当数据到达时，Observables 调用传递给 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
       );