“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

I developed a simple Angular application to show the use of this RXJS Operator, with the following address:

jerry-combine.stackblitz.io/

Where limit controls the number of elements displayed and offset controls the number of elements displayed:

For example, when I change offset to 1, the display element starts with ivysaur:

First, I designed a form containing two input controls to maintain limit and offset:

<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>
Copy the code

LimitControl and offsetControl are the two public properties I defined in the component:

Limit $data sources: from limitControl valueChanges.

 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(),
      );
Copy the code

Note that a distinctUntilChanged is used, which means that data will not be emitted downstream if the value of limit$has not changed.

Pokemon $data source:

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),
      );
Copy the code

Notice the data on line 62, the data structure is an array, and the first element is limit
Contains the value, and the second element is o f f s e t The second element is offset Values included:

After these two values are processed by map, they are delivered to the pokemonService.

Finally, the Response returned by the service is expanded by ngFor and displayed as a list.

The final rendered list data is shown below:

Pokeapi. Co/API/v2 / poke… This API can be used on the public network for learning purposes:

Here’s a small problem: Every time I change the limit value in my browser:

The valueChanges event for form Control fires twice:

This is a known problem with the Angular framework:

Github.com/angular/ang…

To use the formControl directive, we need to import the following module in the AppModule:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Copy the code

The app component template uses elements such as mat-form-field from the Angular Material Design Module:

import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
Copy the code

As shown below:

These dependencies need to be explicitly defined in package.json: