Angular 2报告包含3个或更多REST调用

Question

我正在尝试创建一个自定义的报告/页面，该报告/页面是通过拉入三个不同的表来构建的——订单标题、订单详细信息和工作通知单。我可以在常规javascript中实现这一点(处理所有REST调用，然后生成HTML代码插入DOM)，但我不知道Angular 2中应该采用什么方法。表格依赖关系为订单标题->订单详细信息->工作通知单。我有三个服务，每个REST调用链接一个服务(请参阅下面的代码)。我正在努力解决如何从所有三个表中获得数据以正确地显示在HTML模板上，其中订单标题信息在一行上，每个订单标题下的子详细信息行。

我在我的应用程序中尝试过这样的东西。组件：

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 Corp.

Item: Product123       Qty. 3       Production Status: In Shipping

订单：2描述：特殊订单客户：ACME Corp.

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

如果你在下面加上：

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>