Dans Angular, l' tapopérateur dans RxJS est utilisé pour effectuer des effets secondaires pour chaque valeur émise à partir d'un flux observable, sans modifier ou transformer les valeurs elles-mêmes. Voici comment vous pouvez utiliser tapdans Angular :

1. Importez l' tapopérateur depuis RxJS à l'aide de l'instruction d'importation suivante :

import { tap } from 'rxjs/operators';

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent implements OnInit {
  users: any[];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers()
      .pipe(
        tap(user => console.log(user))
      )
      .subscribe(users => this.users = users);
  }
}

1. Journalisation des observables

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

const observable = of(1, 2, 3);

observable
  .pipe(
    tap(value => console.log(`Value emitted: ${value}`))
  )
  .subscribe();

2. Modifier l'état

Un autre cas d'utilisation tap()consiste à modifier l'état en dehors de l'Observable. Voici un exemple de la façon dont vous pouvez utiliser tap()pour incrémenter un compteur pour chaque valeur émise par un Observable :

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

let counter = 0;

const observable = of(1, 2, 3);

observable
  .pipe(
    tap(() => counter++)
  )
  .subscribe();

console.log(`Counter value: ${counter}`); // Output: Counter value: 3

3. Débogage des observables

tap()peut également être utile pour déboguer Observables. Par exemple, vous pouvez utiliser tap()pour enregistrer le début et la fin d'un Observable, ainsi que toutes les erreurs qui se produisent :

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

const observable = of(1, 2, 3);

observable
  .pipe(
    tap({
      next: value => console.log(`Value emitted: ${value}`),
      complete: () => console.log('Observable completed'),
      error: error => console.log(`Error: ${error}`)
    })
  )
  .subscribe();

J'espère que ces exemples vous aideront à comprendre comment utiliser l' tap()opérateur dans RxJS !

Codage de niveau supérieur

Merci de faire partie de notre communauté ! Avant que tu partes:

• Applaudissez pour l'histoire et suivez l'auteur
• Voir plus de contenu dans la publication Level Up Coding
• Cours d'entretien de codage gratuit ⇒ Voir le cours
• Suivez-nous : Twitter | LinkedIn | Bulletin