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 方法应该 return 一个像这样的可观察对象：

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

Answer 2

您作为参数发送给 subscribe 方法的函数是一个回调，将来会调用。它可能会在 getTest 方法完成他的工作后被调用，所以你的回调将执行：itemArray = z 但 itemArray 目前不存在。

这就是为什么视图中的行 <div *ngFor="let eqItem of getTest(item.username)"> 等同于 <div *ngFor="let eqItem of []">（如果订阅方法中的回调将在 getTest 方法完成后执行。

解决方案：

如@echonax 所述，Async 将是最佳解决方案。

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

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

简而言之：异步管道将订阅和取消订阅（在组件应该被销毁之后）并将 return 到 ngFor 数组（在这种情况下）。

Angular 2 - Observable 更新返回值

Angular 2 - Observable update the returned value

angular

typescript

observable

subscription

angularfire2