Di Angular, tapoperator di RxJS digunakan untuk melakukan efek samping untuk setiap nilai yang dipancarkan dari aliran yang dapat diamati, tanpa mengubah atau mengubah nilai itu sendiri. Inilah cara Anda dapat menggunakan tapdi Angular:

1. Impor tapoperator dari RxJS menggunakan pernyataan impor berikut:

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. Mencatat Observable

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. Memodifikasi keadaan

Kasus penggunaan lain untuk tap()adalah memodifikasi status di luar Observable. Berikut adalah contoh bagaimana Anda dapat menggunakan tap()untuk menaikkan penghitung untuk setiap nilai yang dipancarkan oleh 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. Debugging Observable

tap()juga dapat berguna untuk men-debug Observables. Misalnya, Anda dapat menggunakan tap()untuk mencatat awal dan akhir Observable, serta kesalahan apa pun yang terjadi:

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

Saya harap contoh ini membantu Anda memahami cara menggunakan tap()operator di RxJS!

Tingkatkan Pengodean

Terima kasih telah menjadi bagian dari komunitas kami! Sebelum kamu pergi:

• Tepuk tangan untuk ceritanya dan ikuti penulisnya
• Lihat lebih banyak konten di publikasi Level Up Coding
• Kursus wawancara coding gratis ⇒ Lihat Kursus
• Ikuti kami: Twitter | LinkedIn | Buletin