將對象屬性傳遞給組件服務，還是不傳遞給服務？

Question

我對Observables，Promises，Angular 2相當陌生，並試圖理解架構和最佳實踐。

我有一個應用程序組件，如下所示：

export class AppComponent { 

    items: Item[] = // some Items in here 
    totalSalesLastThirtyDays: number = 0 

    constructor (private itemTransactionsService: ItemTransactionsService) {} 

    ngOnInit() { 
    this.itemTransactionsService.getLastThirtyDays(this.items) 
    } 
} 

我有一個看起來像這樣的服務：

@Injectable() 
export class ItemTransactionsService { 

    constructor (private http: Http) {} 

    getLastThirtyDays(items: Item[]) { 
    /// How do I know when all the observables have completed 
    /// and I can compute the totalSalesLastThirtyDays? 
    /// Where would I set totalSalesLastThirtyDays property of AppComponent? 
    for (let item of items) { 
     this.getItemTransactions(item).subscribe(result => { 
         // console.dir("result = " + result); 
         item.soldInLast15Days = result[0] 
         item.soldInLast30Days = result[1]      
         }, 
         error => {}) 
    } 
    } 



    getItemTransactions(item: Item): Observable<any> { 
    // Work work work 
    return this.http.post(this.url, body, options) 
        .map(this.extractData) 
        .catch(this.handleError); 
    } 
} 

最終，當所有的getItemTransactions已調用和每個返回item，我想計算totalSalesLastThirtyDays，其中totalSalesLastThirtyDays是我的AppComponent上的一個屬性。

這樣做的「Angular 2」架構方式會是什麼？

我是否通過引用服務傳遞totalSalesLastThirtyDays？ 我是否在getLastThirtyDays上使用observable來傳回計算出的totalSalesLastThirtyDays以在AppComponent中設置？ 我如何知道for循環中的所有API調用都已完成，並且我可以計算totalSalesLastThirtyDays？

我不確定這個問題會是一個很好的標題 - 所以請建議您是否可以考慮這個問題。

Answer 1

我會在這裏使用RXjs zip運算符。

服務

import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class ItemTransactionsService { 

    constructor (private http: Http) {} 

    getLastThirtyDays(items: Item[]) { 
    return Observable.zip(
     ...items.map(item => { 
     return this.getItemTransactions(item); 
     }) 
    ).map((data: Array<any>) => { 
    // You get array of responses here 
    // Do your calculations and return it 
    return data; 
    }); 
} 

getItemTransactions(item: Item): Observable<any> { 
    // Work work work 
    return this.http.post(this.url, body, options) 
       .map(this.extractData) 
       .catch(this.handleError); 
} 
} 

元器件

export class AppComponent { 

    items: Item[] = // some Items in here 
    totalSalesLastThirtyDays: number = 0 

    constructor (private itemTransactionsService: ItemTransactionsService) {} 

    ngOnInit() { 
    this.itemTransactionsService.getLastThirtyDays(this.items) 
     .subscribe(totalSales => { 
     this.totalSalesLastThirtyDays = totalSales; 
     }) 
    } 
}