[英]Angular2 Service Subscribe not working
I cannot store data into UserDetailsArr object , PFB code for your reference. 我无法将数据存储到UserDetailsArr对象,PFB代码供您参考。
User Details Class: 用户详细信息类:
export class UserDetails
{
userId:string;
userName:string;
password:string;
firstName:string;
lastName:string;
mobileNumber:string;
email:string
}
Service Class: 服务类别:
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 Service is working perfecltly If I log like below, Web服务正常工作如果我像下面这样记录,
this._userService.getUsers()
.subscribe(
/* happy path */ p => console.log(JSON.stringify(p),
/* error path */ e => this.errorMessage = e,
/* onComplete */ () => this.isLoading = false));
user data has logged in browser console. 用户数据已登录浏览器控制台。
[{"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; }
But if I assign the data to UserDetailsArr data is not assigned, 但是,如果我将数据分配给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);
Next line I tried to print but its not working, result is undefined. 下一行我试图打印,但它不工作,结果是未定义的。
Observables call the callbacks passed to subscribe(...)
or other operators like map(...)
when data arrives. 当数据到达时,Observables调用传递给
subscribe(...)
或其他运算符(如map(...)
的回调。
The code after subscribe(...)
is called immediately afterwards and as @JbNizet mentioned this is usually long before data arrives. subscribe(...)
之后的代码随后被立即调用,并且@JbNizet提到这通常在数据到达之前很久。
You need to move code that depends on the data received from the observable into one of the callbacks like: 您需要将依赖于从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
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.