rxjs

带有TypeScript错误http.get（…）.map的角度HTTP GET不是[null]中的函数

由 有些话、适合烂在心里 提交于 2020-03-12 21:40:35
我在Angular中遇到HTTP问题。 我只想 GET 一个 JSON 列表并将其显示在视图中。 服务等级 import {Injectable} from "angular2/core"; import {Hall} from "./hall"; import {Http} from "angular2/http"; @Injectable() export class HallService { public http:Http; public static PATH:string = 'app/backend/' constructor(http:Http) { this.http=http; } getHalls() { return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json()); } } 在 HallListComponent 我从服务中调用 getHalls 方法： export class HallListComponent implements OnInit { public halls:Hall[]; public _selectedId:number; constructor(private _router:Router, private

Making one observable after the other one is complete

由 时间秒杀一切 提交于 2020-03-04 20:01:21
问题 I subscribe to observable below: this.router.events .filter(event => event instanceof NavigationEnd) .startWith({}) .pairwise() .subscribe((events: [NavigationEnd, NavigationEnd]) => { if ( this.breadcrumbs.length > 0 && events[0].url && events[0].url.split("?")[0] === events[1].url.split("?")[0] ) { return; } let root: ActivatedRoute = this.activatedRoute.root; this.breadcrumbs = this.getBreadcrumbs(root); this.checkSetIsHomePage(); this.setBreadcrumbHeight(); }); and I want to subscribe to

catchError cancel all parallel requests

由 狂风中的少年 提交于 2020-03-04 17:37:27
问题 I made multiple requests in parallel. then I throw error when timeout. getAllDirections() { ... return from(urls).pipe( // a list of api urls mergeMap((urlParam, index) => this.http.get<ISchedules>(urlParam[0]).pipe( map(dataRes => { return dataRes; }), timeout(6000), catchError(error => { console.log(error); return throwError(`Request timeout ${error}`); }) ) ) ); Then in my effect I capture the error $LoadSchedulingsByDirectionsByBranch = createEffect(() => this.actions$.pipe( ofType<any>

catchError cancel all parallel requests

由 雨燕双飞 提交于 2020-03-04 17:37:13
问题 I made multiple requests in parallel. then I throw error when timeout. getAllDirections() { ... return from(urls).pipe( // a list of api urls mergeMap((urlParam, index) => this.http.get<ISchedules>(urlParam[0]).pipe( map(dataRes => { return dataRes; }), timeout(6000), catchError(error => { console.log(error); return throwError(`Request timeout ${error}`); }) ) ) ); Then in my effect I capture the error $LoadSchedulingsByDirectionsByBranch = createEffect(() => this.actions$.pipe( ofType<any>

rxjs合并数据流操作符

由 限于喜欢 提交于 2020-03-04 11:01:30
一、concat首尾相连 工作方式： 当第一个Observable对象complete之后，concat就会去subscribe第二个Observable对象获取数据，把同样的数据传给下游。 直到最后一个Observable完结之后，concat产生的Observable也就完结了。 import { of,concat } from 'rxjs'; ... const source1$ = of(1,2,3) const source2$ = of(4,5,6) const source$ = concat(source1$,source2$) source$.subscribe( console.log, null, ()=>console.log('complete') ) ... 输出结果 二、merge：先到先得快速通过 工作方式： 第一个Observable对象不完结，并不影响下游的observable对象，随先得到，就先输出。 当所有的Observable对象完结了，merge才会完结自己的Observable对象。 import { timer, merge } from 'rxjs'; import 'rxjs/add/operator/map' ... // 从第0毫秒开始，每隔1000毫秒产生一个数据，依次是：0A、1A、2A.... const

Angular - Show dropdown after write @ on input field

由 自闭症网瘾萝莉.ら 提交于 2020-03-03 07:31:33
问题 My Objective is to show a dropdown menu when i start to write @ on the input field. My Component myControl: FormControl = new FormControl(); options = [ 'One', 'Two', 'Three' ]; filteredOptions: Observable<string[]>; ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith('@'), map(val => val.length >= 1 ? this.filter(val): []) ); } filter(val: string): string[] { return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0); console.log

Angular - Show dropdown after write @ on input field

由 孤街醉人 提交于 2020-03-03 07:31:14
问题 My Objective is to show a dropdown menu when i start to write @ on the input field. My Component myControl: FormControl = new FormControl(); options = [ 'One', 'Two', 'Three' ]; filteredOptions: Observable<string[]>; ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith('@'), map(val => val.length >= 1 ? this.filter(val): []) ); } filter(val: string): string[] { return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0); console.log

How do I use RXJS fromEvent in React?

由 空扰寡人 提交于 2020-03-03 03:42:44
问题 I'm trying to log the click event on a button in react: const InputBox = () => { const clicky = fromEvent( document.getElementById('clickMe'), 'click' ).subscribe(clickety => console.log({ clickety })); return ( <button id="clickMe" type="button"> Click Me </button> ); }; I get the following error 'Invalid event target' The setup seems to be fine. If I replace document.getElementById('clickMe') with document then it logs the clicks. But that logs any click in the document and I just want the

rxjs使用of:举例数据的实例

由 浪尽此生 提交于 2020-03-02 10:14:19
注意： 安装了 npm install rxjs@6.5.4 --save 如果按照以下方法调用of方法：会报错找不到of方法的错误。 import React from 'react'; import { Observable } from 'rxjs'; import 'rxjs/add/observable/of' const FlowPage = () => { const source$ = Observable.of(1,2,3); source$.subscribe( console.log, null, ()=>console.log('complete') ) return <h1>rxjs学习</h1>; }; export default FlowPage; 解决方案一： npm install rxjs-compat@6.5.4 --save 执行结果： 解决方案二： import { of } from 'rxjs'; const source$ = of(1,2,3) source$.subscribe( console.log, null, ()=>console.log('complete') ) 来源： https://www.cnblogs.com/hibiscus-ben/p/12393997.html

RxJS学习笔记之Subject

由 一个人想着一个人 提交于 2020-03-01 05:10:52
本文为原创文章，转载请标明 出处 目录 Subject BehaviorSubject ReplaySubject AsyncSubject 1. Subject 总的来说， Subject 既是能够将值多播给多个观察者的特殊的可观察对象，因为可以添加观察者并使用 subscribe 方法来接收值；又是观察者，因为它有 next(v) 、 error(e) 、 complete() 方法。下面这段代码很好的说明了每个 Subject 既是 Observable 又是 Observer 。 var subject = new Rx.Subject(); subject.subscribe({ next: (v) => console.log('observerA: ' + v) }); subject.subscribe({ next: (v) => console.log('observerB: ' + v) }); subject.next(1); subject.next(2); 输出： observerA: 1 observerB: 1 observerA: 2 observerB: 2 2. BehaviorSubject BehaviorSubject 能够保存当前值，当有新的观察者订阅时，就会立即从 BehaviorSubject 接收到当前值。下面这段代码，初始值为
订阅 rxjs