En Angular, el tapoperador en RxJS se utiliza para realizar efectos secundarios para cada valor emitido desde un flujo observable, sin modificar ni transformar los valores en sí. Así es como se puede usar tapen Angular:

1. Importe el tapoperador de RxJS usando la siguiente declaración de importación:

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. Observables de registro

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. Estado de modificación

Otro caso de uso tap()es modificar el estado fuera del Observable. Aquí hay un ejemplo de cómo puede usar tap()para incrementar un contador para cada valor emitido por 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. Observables de depuración

tap()también puede ser útil para depurar Observables. Por ejemplo, puede usar tap()para registrar el inicio y el final de un Observable, así como cualquier error que ocurra:

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();

¡Espero que estos ejemplos te ayuden a entender cómo usar el tap()operador en RxJS!

Codificación de nivel superior

¡Gracias por ser parte de nuestra comunidad! Antes de que te vayas:

• Aplaude la historia y sigue al autor
• Ver más contenido en la publicación Level Up Coding
• Curso gratuito de entrevista de codificación ⇒ Ver curso
• Síguenos: Twitter | LinkedIn | Boletin informativo