Question

我对rxjs函数有一些疑问。实际上，我向http服务器发出请求。我从http服务器接收数据的方式是两步，因为每个请求只返回10个项目，而不是整个项目。每个请求都有页码，所以，如果我总共有100个项目，我必须进行10次任务。因此，在逐个提出请求之前，我首先提取总页数，然后循环请求与页数一样多的请求。为了做到这一点，我使用如下的switchMap函数。

getItems(id: string) {
    return this.dataService.getPageNum(id).switchMap (
    (page_num: number) => { 

                for(let i=1; i<=page_num; i++) {
                    this.dataService.getItems(id, i).subscribe(
                        (data: Object) => {
                            this.items.push(data); 
                        }
                    )
                }
            }
        );
    }

它返回错误错误TS2345：类型的参数＆＃39;（page_num：number）=＆gt;空隙＆＃39;不能分配给＆＃39;类型的参数（值：数字，索引：数字）=＆gt; ObservableInput＆LT; {}＆GT;＆＃39 ;.键入＆＃39; void＆＃39;不能分配给＆＃39; ObservableInput＆lt; {}＆gt;＆＃39;。

所以，我搜索了一些关于这个问题的信息，我找到了一些东西，

Angular 2 - RxJS Switch Map Issue

但我不明白什么问题和答案说得好。这意味着我应该使用Observable.empty（）来使其工作？另外，我甚至试图返回Observable.of（null）和Observable.empty（），它说Property＆＃39; empty＆＃39;在类型＆＃39; typeof Observable＆＃39;中不存在甚至我导入了这个功能。

Answer 1

我很高兴您熟悉rxjs。你有几个错误。

live example

您在switchMap函数内部没有返回任何内容。它期望你这样做（返回一个可观察的），这是mergeMap，switchMap和concatMap的目的，以平面化地图。检查此site，我希望它可以帮助您开始使用。
您必须从不在switchMap函数内部的定制地图管理订阅。所以这一行不正确：

this.dataService.getItems(id, i).subscribe(

<强> your.component.ts

 getItems(id: string) {
           return this.dataService.getPageNum(id)
                     .switchMap((page_num: number) => {
                         for(let i=1; i<=page_num; i++) {
                             return this.dataService.getItems(id, i);
                         }
                     }).subscribe((data: Object) => {
                         this.items.push(data); 
                     });
         }

最后，由于 rxjs核心团队的建议是使用管道运营商，这是正确的解决方案，我的意思是rxjs方式：

import { switchMap } from 'rxjs/operators';

...

getItems(id: string) {
      return this.dataService.getPageNum(id)
                .pipe(switchMap((page_num: number) => {
                    for(let i=1; i<=page_num; i++) {
                        return this.dataService.getItems(id, i);
                    }
                })).subscribe((data: Object) => {
                    this.items.push(data); 
                });
    }

类型的参数＆＃39;（num：number）=＆gt;空隙＆＃39;不能分配给＆＃39;类型的参数（值：数字，索引：数字）=＆gt; ObservableInput＆LT; {}＆GT;＆＃39;

1 个答案: