我開發了一個簡單的 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" type="number">
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <input matinput="" placeholder="Offset" 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)

通過一個實際的例子學習 combineLatest

相關文章