In Angular tapwird der Operator in RxJS verwendet, um Nebeneffekte für jeden ausgegebenen Wert aus einem beobachtbaren Stream auszuführen, ohne die Werte selbst zu ändern oder zu transformieren. So können Sie tapin Angular verwenden:

1. Importieren Sie den tapOperator aus RxJS mit der folgenden Importanweisung:

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. Protokollieren von 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. Zustand ändern

Ein weiterer Anwendungsfall für tap()ist das Ändern des Zustands außerhalb des Observable. Hier ist ein Beispiel dafür, wie Sie tap()einen Zähler für jeden von einem Observable ausgegebenen Wert erhöhen können:

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 debuggen

tap()kann auch zum Debuggen von Observables nützlich sein. Beispielsweise können Sie tap()den Start und das Ende eines Observable sowie auftretende Fehler protokollieren:

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

Ich hoffe, diese Beispiele helfen Ihnen zu verstehen, wie Sie den tap()Operator in RxJS verwenden!

Level-Up-Codierung

Danke, dass Sie ein Teil unserer Community sind! Bevor du gehst:

• Klatsche für die Geschichte und folge dem Autor
• Sehen Sie sich weitere Inhalte in der Level Up Coding-Publikation an
• Kostenloser Kurs für Programmierinterviews ⇒ Kurs anzeigen
• Folge uns: Twitter | LinkedIn | Newsletter