我不能將數據存儲到UserDetailsArr對象,PFB代碼供您參考。Angular2服務訂閱不起作用
用戶詳細信息類別:
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":"[email protected]"},
{"UserId":"d9e5ba40-d0d7-4d90-89b0-7e26660cc84b","UserName":"senthil","Password":"pwd","FirstName":"SENTHIL","LastName":"KUMAR","MobileNumber":"1234567890","Email":"[email protected]"},
{"UserId":"a59dabad-5a8c-4ced-9006-2181bf8c10cb","UserName":"vijay","Password":"pwd","FirstName":"VIJAY","LastName":"RAJ","MobileNumber":"1234567890","Email":"[email protected]"},
{"UserId":"f3e2d351-9413-4d80-8623-36556d27f875","UserName":"thamizh","Password":"pwd","FirstName":"THAMIZH","LastName":"VANAN","MobileNumber":"1234567890","Email":"[email protected]"}]
(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);
下一行我試圖打印,但它不工作,結果是不確定的。
嗯,當然。您的服務是異步的。這就是爲什麼它返回一個Observable,而不僅僅是一個用戶數組。所以當用戶可用時,很可能當你得到對HTTP請求的響應時,函數'p => this.UserDetailsArr = p'會在console.log(this.UserDetailsArr)行後面執行很長時間得到用戶。 –