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方法应该返回一个observable，如：

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);
}

简而言之：Async管道将订阅和取消订阅（在组件被破坏之后）并返回ngFor数组（在本例中）。

Angular 2 - Observable更新返回的值

2 个答案: