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
Reference
이 문제에 관하여(Angular - Rxjs - 연산자 맵), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ricardojavister/angular-rxjs-operator-map-3nam텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)