我无法将数据存储到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),/* 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","FirstName":"SENTHIL","LastName":"KUMAR","Email":"senthil@gmail.com"},{"UserId":"a59dabad-5a8c-4ced-9006-2181bf8c10cb","UserName":"vijay","FirstName":"VIJAY","LastName":"RAJ","Email":"vijay@gmail.com"},{"UserId":"f3e2d351-9413-4d80-8623-36556d27f875","UserName":"thamizh","FirstName":"THAMIZH","LastName":"VANAN","Email":"thamizh@gmail.com"}]
(e) { return _this.errorMessage = e; } () { return _this.isLoading = false; }
但是,如果我将数据分配给UserDetailsArr,则不会分配数据,
this._userService.getUsers()
.subscribe(
/* happy path */ p => this.UserDetailsArr = p,/* onComplete */ () => this.isLoading = false);
console.log(this.UserDetailsArr);
下一行我试图打印,但它不工作,结果是未定义的.
解决方法
当数据到达时,Observables调用传递给subscribe(…)或其他运算符(如map(…))的回调.
subscribe(…)之后的代码随后被立即调用,并且@JbNizet提到这通常在数据到达之前很久.
您需要将依赖于从observable接收的数据的代码移动到其中一个回调中,例如：
this._userService.getUsers()
.subscribe(
/* happy path */ p => {
this.UserDetailsArr = p;
console.log(this.UserDetailsArr);
},/* onComplete */ () => this.isLoading = false
);
