3つ以上のREST呼び出しを含む角度2のレポート

Question

注文ヘッダー、注文の詳細、およびジョブチケットの3つの異なるテーブルを取得してカスタマイズされたレポート/ページを作成しようとしています。私はこれを通常のjavascript（すべてのREST呼び出しを処理し、DOMに挿入するHTMLコードを生成する）で正常に動作させることができますが、アプローチがAngular 2であるべきものがわかりません。 >注文詳細 - >ジョブチケット。私は3つのサービスを用意しています。それぞれのREST呼び出しがチェーンされています（次のコードを参照）。私は3つのテーブルすべてからのデータをHTMLテンプレートに適切に表示する方法に苦しんでいます。ここでは、Order Header情報が1行にあり、サブディテールが各注文ヘッダーの下にあります。

私はapp.componentにこのような何かを試してみました

：

this.ordersService.getOrders() 
    .subscribe(data => { 
     this.orders = data; 
    for (let i in this.orders) { 

    this.detailsService.getDetails(this.orders[i].id) 
     .subscribe(data => { 
       this.details = data; 

       for (let ii in this.details) { 
        this.jobTicketService.getJobTicket(this.orders[i].id, this.details[ii].id) 
           .subscribe(data => { 
             // process data 
            } 

app.component.html - （ちょうどテストのために、最終的な形にフォーマットされていません）私は何を得る

<div id="title"> 
    {{title}} 
</div> 
<div *ngFor="let order of orders"> 
    {{order.Title}} 
    <div *ngFor="let detail of details"> 
     {{detail.Description}} 
     <div *ngFor="let jobTicket of jobTickets"> 
      {{activity.Title}} 
     </div> 
    </div> 
</div> 

Order 1 
    Order 4 Detail Id 5   (last record in details array) 
     Job Ticket Order 4 Detail Id 5 Activity 1 
     Job Ticket Order 4 Detail Id 5 Activity 2 
Order 2 
    Order 4 Detail Id 5   (last record in details array) 
     Job Ticket Order 4 Detail Id 5 Activity 1 
     Job Ticket Order 4 Detail Id 5 Activity 2 
Order 3 
    Order 4 Detail Id 5   (last record in details array) 
     Job Ticket Order 4 Detail Id 5 Activity 1 
     Job Ticket Order 4 Detail Id 5 Activity 2 
Order 4 
    Order 4 Detail Id 5 
     Job Ticket Order 4 Detail Id 5 Activity 1 
     Job Ticket Order 4 Detail Id 5 Activity 2 

console.logに値を出力してもわかりませんが、わかりませんそれをテンプレートに適切にリンクさせる方法ここで

は、私はそれが最終的に見る必要があるかのサンプルです：

順序：1説明：カスタム製品のクライアント：ABC社

Item: Product123  Qty. 3  Production Status: In Shipping 

受注：2説明：特別注文のクライアント：ACME株式会社

Item: Product234  Qty. 1  Production Status: In Production 
    Item: Product123  Qty. 3  Production Status: In Shipping 

ありがとうございます！

Answer 1

このような何か試してみてください：

public get data$() { 
    return this.ordersService.getOrders() 
    .switchMap(orders => Observable 
     .forkJoin(...orders.map(order => this.detailsService.getDetails(order.id)) 
      .mergeMap(([...details]) => Observable 
      .forkJoin(details.map(detail => this.jobTicketService.getJobTicket(detail.id)) 
       .mergeMap(([...tickets]) => {orders, details, tickets}) 
      ) 
     ) 
     ) 
    ); 
} 

そして、あなたがそれにsubscripte場合：

this.data$.subscribe(data => { 
    // process your data (should be { orders: orders, details: details, tickets: tickets}) 
}) 

注：ただ、これを作っあなたが使用できるテンプレートで

そのテストされていないがそれ（例）：

<div *ngFor="let order of (data$ | async)?.orders)>your order</div>