オブジェクトプロパティをコンポーネントからサービスに渡すかどうかを指定します。

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のプロパティです。

これを行うための「角度2」のアーキテクチャ上の方法は何ですか？

サービスへの参照によってtotalSalesLastThirtyDaysを渡しますか？ getLastThirtyDaysのオブザーバブルを使用して、計算されたtotalSalesLastThirtyDaysを返信してAppComponentに設定しますか？ for-loop内のすべてのAPI呼び出しが完了し、totalSalesLastThirtyDaysを計算できることをどのように知ることができますか？

私はこの質問の良いタイトルになるかどうかはわかりません。あなたが考えることができるかどうかを教えてください。

Answer 1

ここではRXjsジップ演算子を使用します。

サービス

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