Angular - Rxjs - 연산자 mergeAll

MergeAll is represented by 2 Observables, the first one is named a higher-order Observable and the second one is an Observable that will depend upon each item of the higher-order Observable.

MergeAll은 첫 번째 Observable에서 오는 각 항목별로 작업 또는 검색을 수행하는 시나리오가 있을 때 유용하므로 각 항목에 대해 하나의 Observable을 갖게 됩니다.

이를 명확하게 하기 위해 예를 들어 설명하겠습니다.

예시:

2개의 Observable이 있습니다.

1- 높은 Observable 순서 안에 과일 이름만 있습니다.

const fruits$ = new Observable((observer) => {
      observer.next('Cereza');
      observer.next('Mandarina');
      observer.next('Pera');
      observer.complete();
    });

2- 두 번째 Observable은 이름, 설명, 가격 및 이미지와 함께 모든 과일을 포함하며 서비스 이름 productService에 있습니다.

getProductsByName(name: string): Observable<any> {
    let headers = new HttpHeaders();
    headers = headers.set(
      'X-Master-Key',
      '$2b$10$ghNHmZWM5nvdrV5tDL6akuKN6JanJ9/iG9vAa4F1yJF8X/ccv3o9C'
    );
    const url = 'https://api.jsonbin.io/v3/b/62b9ef87192a674d291cb521';
    const data = this.httpClient.get<RootObject>(url, { headers: headers });
    return data.pipe(
      map((x) => {
        return x.record;
      }),
      map((y) => {
        let filtered = y.filter((c) => c.name === name);
        return filtered.length > 0 ? filtered[0] : null;
      })
    );
  }

챌린지는 높은 Observable 순서를 읽고 getProductsbyName 메서드를 호출하고 Observable 목록의 모든 제품에 대한 모든 세부 정보를 검색하여 갤러리에 표시하는 것입니다.

최종 결과:



MergeAll을 사용한 Observable의 구조.



최종 코드:

import { Component, OnInit } from '@angular/core';
import { map, mergeAll, Observable, of } from 'rxjs';
import { Record } from 'src/app/model/record';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss'],
})
export class ProductListComponent implements OnInit {
  record: Record[] = [];
  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.getProducts();
  }

  addItem(name: string) {}

  getProducts(): void {
    const fruits$ = new Observable((observer) => {
      observer.next('Cereza');
      observer.next('Mandarina');
      observer.next('Pera');
      observer.complete();
    });

    fruits$
      .pipe(
        map((x) => {
          return this.productService.getProductsByName(`${x}`);
        }),
        mergeAll()
      )
      .subscribe((x) => {
        this.record.push(x);
      });
  }
}

Live Demo
Download Code