在 angular rxjs 中寻找类似 OrElse 的东西在管道中查找函数

Question

我有以下代码。我想要实现的是当“查找”功能在可观察的加载订单中找不到任何订单对象时重定向到找不到的页面。

private order: Observable<OrderModel>;

ngOnInit() {
    this.route.params.subscribe(params => {
    this.name = params.id;
    this.order = this.orderService.ordersLoaded.pipe(map((orders: OrderModel[]) => orders
          .find((order: OrderModel) => order.orderName === this.name.toUpperCase())));
 });

我尝试过类似的方法：

ngOnInit() {
    this.route.params.subscribe(params => {
    this.name = params.id;
    this.order = this.orderService.ordersLoaded.pipe(map((orders: OrderModel[]) => orders
        .find((order: OrderModel) => order.orderName === this.name.toUpperCase()),
        defaultIfEmpty(this.router.navigate(['/notFound']))
      ));
 });

但它总是将我重定向到未找到的页面组件。

Answer 1

您可以点按运算符来归档您想要的内容：

this.order = this.orderService.ordersLoaded.pipe(
      map((orders: OrderModel[]) => orders.find(order => order.orderName === this.name.toUpperCase()),
      tap(order => {
        if (!order) {
          this.router.navigate(['/notFound']);
        }
      })
    ));

你可以创建一些自定义的 rxjs 操作符来摆脱if：

export function tapIf<T>(
  predicate: (value: T) => boolean,
  fn: (x: T) => void
): MonoTypeOperatorFunction<T> {
  return input$ =>
    input$.pipe(
      tap(x => {
        if (predicate(x)) {
          fn(x);
        }
      })
    );
}

export function tapIfFalsy<T>(fn: (x: T) => void): MonoTypeOperatorFunction<T> {
  return tapIf<T>(x => !x, x => fn(x));
}

那么你的代码可以变得更加简单：

this.order = this.orderService.ordersLoaded.pipe(
      map((orders: OrderModel[]) => orders.find(order => order.orderName === this.name.toUpperCase()),
      tapIfFalsy(() => this.router.navigate(['/notFound']))
    ));

Answer 2

defaultIfEmpty() 实际上只在 observable 完成但没有返回任何内容时触发， https://www.learnrxjs.io/operators/conditional/defaultifempty.html 它与返回的值无关

你可以试试下面的代码

zip(this.orderService.ordersLoaded,this.route.params).pipe(tap([orders,params])=>{
  this.name = params.id;
  if(!orders.find(order=>order.orderName === this.name.toUpperCase())
        this.router.navigate(['/notFound'])
}).subscribe()