转换 Observable 中的数据

2024-03-01

我正在从我的 Angular 服务上的 Observable 中检索项目列表。在每个项目中,我都有一个包含主题列表的数组。对于每个主题,我都需要再次调用以获取其详细信息(例如名称、描述等)。

数据结构:

- post1
  - subjects: ['books', 'cars', 'movies']

有了这个清单,我就有了id来自每个主题,但我需要返回一个包含属于该帖子的所有主题(及其详细信息)的可观察值。

应用服务.ts

getPost(id: string): Observable<Post> {
    return Observable.of({id: id, subjects: ['books', 'cars', 'movies']});
}

getSubjects(id: string): Observable<Subject[]> {
    return this.getPost(id).pipe(
        map((post: Post) => post.subjects),
        mergeMap((subjects: string[]) => subjects.map((id: string) => this.getSubject(id))),
        switchMap(list => list),
    );
}

getSubject(id: string): Observable<Subject> {
    switch (id) {
        case 'books':
            return Observable.of({id: 'books', name: 'Books'});
        case 'cars':
            return Observable.of({id: 'cars', name: 'Cars'});
        case 'movies':
            return Observable.of({id: 'movies', name: 'Movies'});
    }
}

它返回一个对象流,但我想返回一个包含所有主题的数组。

[DEMO https://stackblitz.com/edit/angular-mgdvqw?file=app%2Fapp.service.ts]


那是因为你迷茫了.map() of Observables.map() http://reactivex.io/documentation/operators/map.html.map() of Array.prototype.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map.

这行特定的代码:

 mergeMap((subjects: string[]) => subjects.map((id: string) => this.getSubject(id)))

不返回数组Subjects;相反,它返回一个数组Observables因为subject函数内部的参数是一个数组,而不是一个Observable。因此,那个特定的.map()将返回一个返回类型的数组this.getSubject(id),这是一个数组Observables;正是您所得到的行为。

如果你想拥有所有Observables解析为一个数组Subjects,你将不得不使用Observable.forkJoin https://www.learnrxjs.io/operators/combination/forkjoin.html. .forkJoin()结合所有可观察到的并并行激发它们。

getSubjects(id: string): Observable<Subject[]> {
    return this.getPost(id).pipe(
        map((post: Post) => post.subjects),
        mergeMap((subjects: string[]) => Observable.forkJoin([...subjects.map((id: string) => this.getSubject(id))])),
    );
}

现在您可以在您的组件中使用它:

getSubjects(id).subscribe(values=>{
    console.log(values)//returns an array of Subjects
})

注意Observables.forkJoin将不得不等待all在发射之前要完成的可观察量。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

转换 Observable 中的数据 的相关文章

随机推荐