代码之家 › 专栏 › 技术社区 › Pedro Arantes

将一个可观测数据与另一个映射的最佳方法

rxjs angular

Pedro Arantes · 技术社区 · 6 年前

我在一个角度项目中工作,我有一个可观察到的 A 一个 从HTTP请求中发出一个值,我希望根据用户角色(admin、superuser和user)使用另一个可观察值过滤该值。我用 switchMap 如果有,但我认为还有更好的办法。我的解决方案是:

getObervableA.pipe(
    switchMap(itens => {
        function filterItens(allowedItens) {
            return itens.filter(item => {
                return allowedItens.some(({id}) => id === item.id);
            });
        }

        if (isAdmin) {
            return of(itens);
        } else if (isSuperuser) {
            getSuperuserAllowedItens.pipe(map(allowedItens => filterItens(allowedItens)));
        } else {
            getUserAllowedItens.pipe(map(allowedItens => filterItens(allowedItens)));
        }
    }),
).subscribe(
    // do something with A filtered
)

切换图 ...

谢谢您!

2 回复 | 直到 6 年前

Nico 6 年前

与其使用if/else,不如为这些类型的用例组合您的观察结果。它允许更好的可读性和更容易测试

filter &安培; merge 所以像这样:

 function filterItens(allowedItens, itens) {
      return itens.filter(item => {
        return allowedItens.some(({ id }) => id === item.id);
      });
    }

   admin$ = source.pipe(filter(() => isAdmin));
   superUser$ = source.pipe(filter(() => isSuperUser), mergeMap((itens) => getSuperuserAllowedItens.pipe(map(allowedItens => filterItens(allowedItens, itens))))
   user$ = source.pipe(filter(() => !isAdmin && !isSuperUser), mergeMap((itens) => getUserAllowedItens.pipe(map(allowedItens => filterItens(allowedItens, itens))))
   getObervableA.pipe(merge(admin$, superUser$, user$)).subscribe()

CozyAzure 6 年前

Observables 彼此独立, forkJoin 是非常有用的,并且可以更有效地:

forkJoin(getObservableA, getSuperuserAllowedItens, getUserAllowedItens)
    .pipe(map(([itens, superuserItens, userItens]) => {

        if (isAdmin) {
            return itens;
        }

        if (isSuperUser) {
            return itens.filter(item => superuserItens.some(({id}) => id === item.id));
        }

        return itens.filter(item => userItens.some(({id}) => id === item.id));
    }))

这是带有三元运算符的一行(几乎):

forkJoin(getObservableA, getSuperuserAllowedItens, getUserAllowedItens)
    .pipe(map(([itens, superuserItens, userItens]) => {
        return isAdmin ? itens :
            isSuperUser ? itens.filter(item => superuserItens.some(({id}) => id === item.id)) :
                itens.filter(item => userItens.some(({id}) => id === item.id))
    }))

forkJoin(getObservableA, getSuperuserAllowedItens, getUserAllowedItens)
    .pipe(map(([itens, superuserItens, userItens]) => {
        return itens.filter(item => {
            return isAdmin || superuserItens.some(({id}) => id === item.id) || userItens.some(({id}) => id === item.id)
        })
    }))

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前