Angular 2 - Observable更新返回值

如何更新返回值，以便它在完成時顯示？Angular 2 - Observable更新返回值

它正在從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; 
    }

來源

2016-11-12 John

通過使用異步管

編號：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()); 
}

來源

2016-11-12 13:47:43 echonax

有沒有辦法一次使用2管道，因爲我已經使用管道 – John

@John當然，只是把它放在異步之後像'... |異步| anotherPipe' – echonax

你作爲一個參數發送給訂閱方法的作用是，將在未來被稱爲回調。可能會在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（在這種情況下）。

來源

2016-11-12 15:04:45

有沒有辦法一次使用2個管道，因爲我已經在使用管道了 – John

是的，但是額外的管道應該得到一個數組（這是異步管道將從'getTest（item.username）'Observable –

Angular 2 - Observable更新返回值

回答

相關問題