我开发了一个简单的Angular应用程序来演示此rxjs运算符的用法。地址如下：https://jerry-combine.stackbl...其中limit控制显示的列表元素个数，offset控制显示元素的index：比如我把offset改成1时，展示的元素从ivysaur开始：首先，我设计了一个form表单，里面有两个input控件，分别维护limit和offset：
limitControl和offsetControl是我的组件定义的两个公共属性：limit$数据源：来自limitControl.valueChanges。constlimit$=this.limitControl.valueChanges.pipe(startWith(this.limitControl.value),//需要修复类型编号的输入发出两次的错误//https://github.com/angular/angular/issues/12540distinctUntilChanged(),);注意这里使用了一个distinctUntilChanged，意思是如果limit$的值没有变化，pokemon不会向下游发出数据$的Datasource:this.pokemon$=combineLatest(limit$,offset$).pipe(map(data=>({limit:data[0],offset:data[1]})),switchMap(data=>this.pokemonService.getPokemon(data.limit,data.offset)),map((response:{结果：宠物小精灵[]})=>response.results),);注意代码第62行的数据，数据结构是一个数组，第一个元素是limit$包含的值，第二个元素是offset$包含的值：这两个值经过map处理后，它们被传送到服务pokemonService。最后将服务返回的Response通过ngFor展开，展示成列表。最终渲染出来的列表数据如下图所示：https://pokeapi.co/api/v2/pok...这个api可以在公网学习使用：这里有个小问题：每次我browse在浏览器中修改限制值时：表单控件的valueChanges事件会触发两次：这是Angular框架的一个已知问题：https://github.com/angular/an...为了使用formControl指令，我们需要在appmodule中导入以下模块：import{FormsModule,ReactiveFormsModule}from'@angular/forms';以及app组件模板中使用的元素mat-form-field等，来自Angular材料设计模块：import{MatInputModule}from'@angular/material/input';import{MatCardModule}from'@angular/material/卡'；从'@angular/material/table'导入{MatTableModule}；从'@angular/material/button'导入{MatButtonModule}；如下如图所示：这些依赖需要在package.json中显式定义：更多Jerry的原创文章在这里：《汪子熙》：