In Angular, l' tapoperatore in RxJS viene utilizzato per eseguire effetti collaterali per ogni valore emesso da un flusso osservabile, senza modificare o trasformare i valori stessi. Ecco come puoi usare tapin Angular:

1. Importa l' tapoperatore da RxJS utilizzando la seguente istruzione di importazione:

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. Osservabili di registrazione

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. Modifica dello stato

Un altro caso d'uso tap()è modificare lo stato al di fuori di Observable. Ecco un esempio di come è possibile utilizzare tap()per incrementare un contatore per ogni valore emesso da 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. Debug di osservabili

tap()può anche essere utile per il debug di Observables. Ad esempio, puoi utilizzare tap()per registrare l'inizio e la fine di un Observable, nonché eventuali errori che si verificano:

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

Spero che questi esempi ti aiutino a capire come utilizzare l' tap()operatore in RxJS!

Codifica di livello superiore

Grazie per far parte della nostra comunità! Prima che tu vada:

• Batti le mani per la storia e segui l'autore
• Visualizza altri contenuti nella pubblicazione Level Up Coding
• Corso di colloquio di codifica gratuito ⇒ Visualizza il corso
• Seguici: Twitter | Linkedin | Notiziario