Question

我有一份采购订单清单，我希望有另一个组件来保存每个采购订单的详细信息。如何获取每个采购订单的详细信息？我需要通过获取purchase_order.id来显示material_purchase_orders。通过单击viewDetail（），它将导航到新组件并显示特定的采购订单明细

HTML

<div class="card-block" *ngFor="let order of orders">
      <h2 class="proj-name">{{ order.name }}</h2>
      <table>
        <thead>
          <tr>
            <th>Transaction Date</th>
            <th>Reference Number</th>
            <th>Grand Total</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let inner of order.purchase_orders">
            <td>{{ inner.transaction_date }}</td>
            <td>{{ inner.reference }}</td>
            <td> {{ inner.total }} ringgit </td>
            <td><button  type="submit" class = "btn btn-sm btn-primary" (click)="viewDetail(inner.id)"><i class="fa fa-angle-right" aria-hidden="true"></i>  View More Details</button></td>
          </tr>
        </tbody>
      </table>
  </div>

TS

getAllOrders(){
    this.subscription = this.purchaseOrderService.getAll()
        .subscribe(
          (data:any) => {
            this.orders = data.purchaseOrders;
            console.log(data);
          },
          error => {
           console.log(error);
          });
  }

  viewDetail(id){
    this.router.navigate(['orders', id]);
  }

service.ts

getAll() {
        if(!this.orders) {
                this.orders = this.httpClient.get<any>(this.url)
                                    .map((response => response))   
                                    .publishReplay(1)
                                    .refCount();  

            }
            return this.orders
      }

Answer 1

service.ts

将此方法添加到service.ts文件

 getOrder(id: any) {
        this.orders = this.getAll();
        const selectedOrder = this.orders.find(order => order.id === id)
        return selectedOrder;
    }

使用此参数在详细视图中使用参数

ngOnInit(): void {
this.route.params.forEach((params: Params) => {
  if (params['id'] !== undefined) {
    const id = +params['id'];
    this.navigated = true;
    this.purchaseOrderService.getOrder(id)
        .then(order => this.order = order);
  } else {
    this.navigated = false;
  }
});

}

有关详细信息，请参阅此源代码https://github.com/johnpapa/angular-tour-of-heroes/tree/master/src/app

Answer 2

您要获取的是数组内嵌套数组中的项。我看到这可以通过几种方式处理。

您可以将所选订单存储在服务中并在以后获取导航到详细信息页面。缺点是数据不可用在页面刷新。
如果您控制后端，则可以执行所选订单可以直接从db中获取db。（这将是我的选择）
如果您无法控制后端，我认为您需要迭代orders然后inner以查找订单匹配这个选择的顺序。

因此，对于最后一个选项，您的代码应如下所示：

getOrder(id) {
  return this.getAll()
    .map(data => {
      // iterate the top level
      for (let order of data.purchaseOrders) {
        // find the order
        let ord = order.purchase_orders.find(x => x.id === id)
        if(ord)
          return ord;
      }
    })
}

在您的详细信息组件中，就像Dimithu一样，我们获取参数并调用getOrder：

constructor(private route: ActivatedRoute, 
            private purchaseOrderService: PurchaseOrderService) {}

ngOnInit(): void {
  this.route.paramMap
   .switchMap((params: ParamMap) => 
      this.purchaseOrderService.getOrder(+params.get('id')))
        .subscribe(order => this.order = order);
 }

通过Angular 2/4中的ID获取数据

2 个答案:

的 DEMO