使用带有管道的过滤器运算符 - 有条件地答案

【问题标题】：using filter operator with pipe - conditionally使用带有管道的过滤器运算符 - 有条件地
【发布时间】：2021-12-11 16:54:36
【问题描述】：

我不能将过滤器操作符移动到带有条件的地图之外

return this.http.get('profili/usermenu')
                    .pipe(
                        map((menu: Menu[]) => {

                            if (this.appConfig.config.DisableRitiriDetails)
                                menu = menu.filter(item => !item.Description.includes('xxx'));
                            
                            const menuCreated: SidenavItem[] = this.menuSrv.populateMenu(menu); 
                            this.router.navigate([menuCreated[0].routeOrFunction]);
                            return new MenuSuccess(menuCreated);
                        }),
                        catchError(() => of(new LoginError(3)))
                    );

类似

return this.http.get('profili/usermenu')
                    .pipe(
                        filter((menu: Menu) => this.appConfig.config.DisableRitiriDetails || !menu.Description.includes('xxx')),
                        map((menu: Menu[]) => {
                            
                            const menuCreated: SidenavItem[] = this.menuSrv.populateMenu(menu); 
                            this.router.navigate([menuCreated[0].routeOrFunction]);
                            return new MenuSuccess(menuCreated);
                        }),
                        catchError(() => of(new LoginError(3)))
                    );

这样它给我的地图错误（（菜单：菜单[]）

【问题讨论】：

这是因为在filter 中您说参数是Menu，而在地图中您期望的是Menu[]（菜单数组）。
您混淆了数组方法 .filter() 和 rxjs 可观察管道运算符 filter()。理论上，一个 observable 可以发出多次，这就是 rxjs 操作符存在的原因。这并不适用于你，因为你只是在做一个 http get 调用，它只发出一个响应（一个数组）并完成，但是例如在听按钮点击的情况下，你可能想要过滤每个事件是右击还是左击。因此，在您的情况下过滤 observable 没有意义。

标签： angular rxjs rxjs-pipeable-operators

【解决方案1】：

运营商filter是：

计算源 Observable 发出的每个值的函数。

它是整个数组，Menu[]，而不是数组的单个项目。返回值应为真/假。

您的意图是过滤数组的项目，因此您需要另一个映射函数，请参阅pruneMenuItems（由于原始条件令人困惑，我不确定如何更好地命名函数）：

const pruneMenuItems = (menu: Menu[]) => this.appConfig.config.DisableRitiriDetails
      ? menu
      : menu.filter(item => !item.Description.includes('xxx'))

return this.http.get('profili/usermenu')
  .pipe(
    map(pruneMenuItems),
    map((menu: Menu[]) => {
      const menuCreated: SidenavItem[] = this.menuSrv.populateMenu(menu); 
      this.router.navigate([menuCreated[0].routeOrFunction]);
      return new MenuSuccess(menuCreated);
    }),
    catchError(() => of(new LoginError(3)))
  );

【讨论】：