Angular - Rxjs - 연산자 맵

Transforms each item from an source by using a projection function and emit a result as an observable.



예를 보여 드리겠습니다.

jsonbin.io에 Api를 만들었고 다음 json을 반환합니다.

{
    "record": [
        {
            "name": "Pineapple",
            "description": "There are many variations of passages of Lorem.",
            "price": 650,
            "image": "https://images.unsplash.com/photo-1587883012610-e3df17d41270?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
        },
        {
            "name": "Orange",
            "description": "There are many variations of passages of Lorem.",
            "price": 350,
            "image": "https://images.unsplash.com/photo-1577234286642-fc512a5f8f11?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80"
        },
        {
            "name": "Grapes",
            "description": "There are many variations of passages of Lorem.",
            "price": 120,
            "image": "https://images.unsplash.com/photo-1577069861033-55d04cec4ef5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
        },
        {
            "name": "Morron",
            "description": "There are many variations of passages of Lorem.",
            "price": 75,
            "image": "https://images.unsplash.com/photo-1525607551316-4a8e16d1f9ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=710&q=80"
        },
    ],
    "metadata": {
        "id": "62b9ef87192a674d291cb521",
        "private": true,
        "createdAt": "2022-06-27T17:57:27.165Z"
    }
}


처음에는 왼쪽에 모든 상품을 보여주고 사용자가 특정 상품을 클릭하면 오른쪽에 선택된 상품을 매핑합니다.



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

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

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

  getProducts(): void {
    this.productService.getProducts().subscribe((data) => {
      this.records = data.record;
    });
  }

  mapRecord(value: number) {
    this.productService
      .getProducts()
      .pipe(map((x) => x.record))
      .subscribe((data) => {
        this.record = data[value];
      });
  }
}



Live Demo
Download Code

좋은 웹페이지 즐겨찾기