Angular 2 - Observable更新返回值

Question

如何更新返回值，以便它在完成时显示？

它正在从HTML这样叫：

// the item.username is from a higher loop which works. 
<div *ngFor="let eqItem of getTest(item.username)"> 



getTest(username: string): Item[] { 
let itemArray: Item[]; 
this.usersService.subscribeItemsForUsername(username).subscribe(z => { 
    itemArray = z; 
    //return z; 
}); 
return itemArray; 
} 

这里的服务：

subscribeItemsForUsername(username: string): Observable<Item[]> { 
     let returnedList = this.af.database.list('users', { 
     query: { 
      orderByChild: 'username', 
      equalTo: username, 
     } 
    }); 

    return returnedList; 
    } 

Answer 1

通过使用异步管

编号：https://angular.io/docs/ts/latest/guide/pipes.html#async-pipe

变化查看到：

<div *ngFor="let eqItem of getTest(item.username) | async"> 

和getTest方法应该返回可观察到的一样：

getTest(username: string): Observable<Item[]> { 
    return this.usersService.subscribeItemsForUsername(username).map(res=> res.json()); 
} 

Answer 2

你作为一个参数发送给订阅方法的作用是，将在未来被称为回调。可能会在getTest方法完成他的工作后调用，因此您的回调将执行：itemArray = z，但此时itemArray不存在。

这就是为什么在视图中的行<div *ngFor="let eqItem of getTest(item.username)">相当于<div *ngFor="let eqItem of []">（如果你的订阅方法回调将EXCUTE的getTest方法结束后

解决方案：

正如@echonax提到，Async会最佳的解决方案

<div *ngFor="let eqItem of getTest(item.username) | async"> 

getTest(username: string):Observable<Item[]>{ 
return this.usersService.subscribeItemsForUsername(username); 
} 

简而言之：所述异步管将订阅和unsubsribe（成分应destoryed之后），并将返回吨数组ngFor（在这种情况下）。