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都被调用并在每个项目上返回时，我想计算totalSalesLastThirtyDays，其中totalSalesLastThirtyDays是我的AppComponent上的属性。

什么是＆＃34; Angular 2＆＃34;完成这项工作的建筑方式？

我是否通过引用服务传递totalSalesLastThirtyDays？我是否在getLastThirtyDays上使用observable来传回要在AppComponent中设置的计算的totalSalesLastThirtyDays？我怎么知道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;
      })
  }
}

将对象属性传递给组件中的服务，还是不传递给？

1 个答案: