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

Question

我有一个采购订单列表，我想要另一个组件来保存每个采购订单的详细信息。如何通过获取其 ID 获取每个采购订单的详细信息？我需要通过获取 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

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

您可以将选择的订单存储在服务中并在导航到详细信息页面。缺点是数据不可用在页面刷新。
如果你可以控制后端，你可以这样做，选择的订单可以直接根据id从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 中通过 ID 获取数据 2/4

Get Data Through ID in Angular 2/4

angular-routing

angular-http

angular-services

angular-directive

angular

DEMO