Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- flex-1
- 아이오닉 스크롤 이벤트
- angular route
- mysql if
- 옵저버블
- 앵귤러 모달
- formgroup
- modal
- angular button
- 앵귤러 애니메이션
- angular animation
- 스크롤 이벤트 감지
- scroll
- egov spring ajax 사용 예시
- ApexChart
- Router
- Ionic modal
- prisma
- summary
- ajax 사용 예시
- 호버
- TAILWIND
- 스크롤 이벤트
- 검색
- Oracle LISTAGG 사용 예시
- angular modal
- Angular Router
- 모달
- 셀렉트박스 커스텀
- route
Archives
- Today
- Total
깜놀하는 해므찌로
Angular Observable Operator 본문
반응형
SMALL
import { Component, OnInit, OnDestroy } from '@angular/core';
// RxJS
import { Observable, Subscription, from } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';
export class ObservableComponent implements OnInit, OnDestroy {
myArray = [1, 2, 3, 4, 5];
subscription: Subscription;
values: number[] = [];
ngOnInit() {
// 옵저버블 생성
const observable$ = from(this.myArray);
this.subscription = observable$
.pipe(
// 오퍼레이터를 활용한 스트리밍 데이터 수정
map(item => item * 2), // 2, 4, 6, 8, 10
filter(item => item > 5), // 6, 8, 10
tap(item => console.log(item)) // 6, 8, 10
)
// 옵저버블 구독
.subscribe(
// next
value => this.values.push(value),
// error
error => console.log(error),
// complete
() => console.log('Streaming finished')
);
}
ngOnDestroy() {
// 옵저버블 구독 해지
this.subscription.unsubscribe();
}
}
반응형
LIST
'IT' 카테고리의 다른 글
앵귤러 angular Router.navigateByUrl / navigate (0) | 2023.04.08 |
---|---|
Angular HTTP 통신 예시 (0) | 2023.04.08 |
Angular Observable subscirbe (0) | 2023.04.08 |
typescript array delete by index 요소 1개 삭제 예시 (0) | 2023.04.08 |
SPA Angular 구조 다이어그램 (0) | 2023.04.07 |