angular httpClient 获取有或没有按日期过滤的订单

Question

我有规范日期说获取订单，其中 date = date1 >= :date 和 date2=< :date 如果两个日期都为空，它应该 return 基本上所有订单基本上两个 urls 都应该从一个服务传递 baseUrl : string = 'http://localhost:8088/orders'; private filterUrl: string = 'http://localhost:8088/orders?start= &end= ';

如何在 angular 服务中实现这一点以及如何在我的组件中调用它我是这样开始的，但我是 angular 的新手，不知道如何按逻辑行事

  getOrders(From: Date, To: Date): Observable<Order[]> {
return this.http.get(this.baseUrl + '?start=' + From + '&end=' +To)
  .pipe(map(this.extractData),
    tap(data => console.log(JSON.stringify(data))),
    catchError(this.handleError)
  );

} 我想要的是让我的 html 自动显示整个列表，如果两个日期都通过，我的想法是我不会在这种情况下需要上面的 baseUrl 我将使用过滤器 url 和默认值应该为空谁能告诉我如何继续谢谢。这是我的 sql incase

SELECT orderId, petrolQty, orderDate, truckId from orderz \
where (orderDate>=:start or :start is null) and (orderDate<=:end or :end is null)

所以基本上我会按 orderDate 过滤所以我现在做的是

 baseUrl : string = 'http://localhost:8088/orders';

  getOrders(From: Date, To: Date): Observable<Order[]> {
    return this.http.get(this.baseUrl + '?start=' + From + '&end='+To)
      .pipe(map(this.extractData),
        tap(data => console.log(JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

在我的组件中我这样做了

  start: Date = null;
  end: Date = null;

  constructor(private orderService: OrderService, private router: Router) {
  }

  ngOnInit() {
    this.orders = this.getOrdersDto();
  }


  private getOrdersDto() {

    return this.orderService.getOrders(this.start, this.end)
  }

url 我设置为 null 并在邮递员上尝试它给出了异常 unparcable date null，这是因为我将它们设置为 null，现在的问题是我可以创建并且如果服务获取方法，那将当日期设置为 null 时使用 'http://localhost:8088/orders 并且当我输入日期时它将使用新日期来过滤

Answer 1

不要动态构建 URL，而是让 Angular 为您构建。

import { HttpClient, HttpParams } from '@angular/common/http';

baseUrl : string = 'http://localhost:8088/orders';

getOrders(from: Date, to: Date): Observable<Order[]> {
    const params = new HttpParams();

    if (from) {
        params.set('start', from);
    }

    if (to) {
        params.set('end', to);
    }

    return this.http.get(this.baseUrl, { params: params })
        ...;
}

angular httpClient 获取有或没有按日期过滤的订单

angular httpClient get orders with or without a filter by date

angular-services

angular2-observables

angular