我开发了一个简单的 Angular 应用来展示这个 rxjs Operator 的用法，地址如下：

https://jerry-combine.stackblitz.io/

![](https://img-blog.csdnimg.cn/img_convert/84f57211a8ce4879fd352a87eeb1aa32.png)

其中 limit 控制 list 元素显示个数，而 offset 控制显示元素的索引：
![](https://img-blog.csdnimg.cn/img_convert/51570e0b95c0229d95f1f731b6d7f6c8.png)

例如我将 offset 改为 1 时，显示的元素 从 ivysaur 开始：
![](https://img-blog.csdnimg.cn/img_convert/0f36bd5e55bc531728b4d3cf44135324.png)

首先我设计了一个 form 表单，里面包含了两个 input 控件，分别维护 limit 和 offset：

```html
<form>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Limit" [formControl]="limitControl" type="number">
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Offset" [formControl]="offsetControl" type="number">
    </mat-form-field>
  </form>
```
limitControl 和 offsetControl 是我在组件里定义的两个 public 属性：

![](https://img-blog.csdnimg.cn/img_convert/67ef9944383a95004f72192c9356004b.png)

limit$ 的数据源：来自 limitControl.valueChanges.

```typescript
 const limit$ = this.limitControl.valueChanges
      .pipe(
        startWith(this.limitControl.value),
        // Needed to fix a bug where inputs with type number emit twice
        // https://github.com/angular/angular/issues/12540
        distinctUntilChanged(),
      );
```

注意这里使用了一个 distinctUntilChanged，也就是说如果 limit$ 的值没有发生变化时，不会向下游 emit 数据。

pokemon$ 的数据源：

```typescript
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: {results: Pokemon[]}) => response.results),
      );
```

注意代码第 62 行的  data，数据结构为数组，第一个元素是 limit$ 包含的值，第二个元素为 offset$ 包含的值：
![](https://img-blog.csdnimg.cn/img_convert/c72d9d6735438b04e8b5dbff79ffc947.png)

这两个值经过 map 处理后，投递给服务 pokemonService.

最后将该服务返回的 Response，通过 ngFor 展开，显示成列表。

![](https://img-blog.csdnimg.cn/img_convert/dda3c57ab312ce91b1df72cbf27564ba.png)

最后渲染出的列表数据如下图所示：
![](https://img-blog.csdnimg.cn/img_convert/6592d17b8f91adf9d52dd3ee9e35f14a.png)

https://pokeapi.co/api/v2/pokemon/?offset=7&limit=6 这个 api 在公网上可以用于学习目的使用：

![](https://img-blog.csdnimg.cn/img_convert/8f6854a3fd12030075968bc11b7926be.png)

这里有一个小问题：每次我在浏览器里修改 limit 的值时：

![](https://img-blog.csdnimg.cn/img_convert/d44a12113b2861bf4e97332d8f63d543.png)

form control 的 valueChanges 事件会触发两次：
![](https://img-blog.csdnimg.cn/img_convert/0f527c0294f693bddb29d87eceb57c58.png)

这是 Angular 框架一个已知的问题：

https://github.com/angular/angular/issues/12540

为了使用 formControl 这个指令，我们需要在 appmodule 里导入如下 module：

```typescript
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
```

而 app 组件模板里使用的元素 mat-form-field 等等，来自 Angular material design module：

```typescript
import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
```

如下图所示：

![](https://img-blog.csdnimg.cn/img_convert/f243bb9feafdc8f0a450d89edf3f96bf.png)

需要 package.json 里显式定义这些依赖：
![](https://img-blog.csdnimg.cn/img_convert/1669503b8638fbf105d62802bd785a11.png)

ITPub博客

通过一个实际的例子学习 combineLatest

最新文章