将 switchMap 发出的对象收集/连接到数组中

Question

我正在尝试为 linkObjects 动态构建一个数组。动态的，因为我需要读取 Ngrx Store 并获取参数。就像在热图中一样

public linksObject = [
    {
        name: 'Consumption',
        link: ['../consumption'],
    },
    {
        name: 'Heatmap',
        link: ['../heatmap&res=foo'],
    }
 ];

我有一个构建单个对象的 switchMap，但我需要将它附加到 this.linkObjects

第二个 switchMap 正在获取一组角色，例如 ['admin'、'test'、'field_engineer']，并且在 getLinkObjects 中它正在构建对象：

{name: label, link:['..\ ...']}

pages 只是标签的静态列表 ['consumption', 'heatmap']

    public getLinkObjects(roles: string[]): Observable<any> {
        return from(this.pages).pipe(
            switchMap(
                (page): Observable<ILinksObject> =>
                    from(roles).pipe(
                        map((role) => ({
                            name: page,
                            link: [`../${page}&role=${role}`],
                        })),
                    ),
            ),
        );
    }

this.fetchRoles()
    .pipe(
        switchMap((roles: IUserSite[]) => this.getCurrentRoles(roles)),
        switchMap((role: string[]) => this.getLinkObjects(role)),
        // concat the objects emitted by switchMap
    )
    .subscribe();

我尝试了以下3种方法，都没有用：

在订阅中添加推送
添加水龙头

this.fetchRoles()
    .pipe(
        switchMap((roles: IUserSite[]) => this.getCurrentRoles(roles)),
        switchMap((role: string[]) => this.getLinkObjects(role)),
        // concat the objects emitted by switchMap
    )
    .subscribe(this.linkObjects.push);

this.fetchRoles()
    .pipe(
        switchMap((roles: IUserSite[]) => this.getCurrentRoles(roles)),
        switchMap((role: string[]) => this.getLinkObjects(role)),
        tap((role) => this.linkObjects.push(role))
        // concat the objects emitted by switchMap
    )
    .subscribe();

        this.fetchRoles()
            .pipe(
                switchMap((roles: IUserSite[]) => this.getCurrentRoles(roles)),
                switchMap((role: string[]) => this.getLinkObjects(role)),
                tap(console.log), // this gets printed
                reduce((acc, role) => acc.concat(role), this.linksObject),
                tap(console.log), // this does not get printed
            )
            .subscribe(console.log);

我需要帮助指出正确的 rxjs 运算符的使用方向，并帮助解决这 2 个解决方案不起作用的原因。

Answer 1

遍历这段代码：

this.fetchRoles()
    .pipe(
        switchMap((roles: IUserSite[]) => this.getCurrentRoles(roles)),
        switchMap((role: string[]) => this.getLinkObjects(role)),
        tap((role) => this.linkObjects.push(role))
        // concat the objects emitted by switchMap
    )
    .subscribe();

假定 this.fetchRoles() 发出一个 UserSites 数组。

第一个 switchMap 将取消任何现有请求并获取数组 return 由 this.fetchRoles() 编辑的所有 UserSites 的当前角色。这似乎发出单个字符串数组。（我不清楚这些字符串包含什么以及它们与 link 对象名称和 link}

的关系

第二个 switchMap 将取消任何现有请求并获取字符串数组的 link 个对象。这似乎return有作用？

从第二个 switchMap 发出的 role 的类型是什么？（如果您将鼠标悬停在 tap 运算符中的 (role) 上，您可以很容易地在 IDE 中看到它。）

你能确认这是预期的吗？如果这不是预期的，您能否修改您的问题以用文字指定每个操作员的预期输入和输出应该是什么？

更新：我强烈建议您输入您的“角色”：

export interface Role {
   name: string,
   link: string[]
}

那么你的getLinkObjects可以是强类型的：

public getLinkObjects(roles: string[]): Observable<Role>

这应该允许您的水龙头工作，因为它是附加到数组的正确类型：

tap(role => this.linkObjects.push(role))

将 switchMap 发出的对象收集/连接到数组中

Collect / Concat objects emitted from switchMap into an array

observable

rxjs

angular

rxjs-pipeable-operators