Angularjs Angular2服务订阅不工作

我无法将数据存储到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;
        }



    }

用户数据已登录到浏览器控制台

    [{"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; }

但如果我将数据分配给UserDetailsAR，则不会分配数据

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

---

下一行我试图打印，但它不起作用，结果未定义。

可观察对象在数据到达时调用传递给

subscribe（…）

或其他操作符（如

map（…）

）的回调

subscribe（…）

之后的代码会立即调用，正如@JbNizet所提到的，这通常是在数据到达之前很久

您需要将依赖于从observable接收到的数据的代码移动到其中一个回调中，如：

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

---

当然可以。您的服务是异步的。这就是为什么它返回一个可观察的，而不仅仅是一个用户数组。因此，函数

p=>this.UserDetailsArr=p

在

console.log（this.UserDetailsArr）行之后执行很长时间

，当用户可用时，最有可能是当您收到用于获取用户的HTTP请求的响应时。似乎在

之后缺少了一些内容，但是
？是的，：-）但是我需要循环通过UserDetailsArr对象并在*ngFor指令中绑定数据，我现在编辑了上面的服务类，它不起作用，我得到的是空表结果。。你能提供帮助吗？你可能需要添加
json（）
比如
p=>this.UserDetailsArr=p.json（）
。另请参见getUsers（）{let people$=this._http.get（this.getUserUrl）.map（res=>res.json（））返回people$；}这是_userservicegetusers方法。在user listCOmponent中，im get p.json不是一个函数错误
this.\u http.get（…）
返回一个
订阅。您不能从调用
this.\u http.get（…）
返回值。只有在调用传递给
subscribe（…）
或
map（…）
的代码时，才能在某个位置指定值。
 this._userService.getUsers()
       .subscribe(
            /* happy path */ p => {
                this.UserDetailsArr = p;
                console.log(this.UserDetailsArr);
            },
             /* error path */ e => this.errorMessage = e,
             /* onComplete */ () => this.isLoading = false
       );