rxjs6

How to fix “ Property 'wheelDelta' does not exist on type 'WheelEvent' ” while upgrading to angular 7,rxjs6?

孤者浪人 提交于 2019-12-05 23:59:50
I'm upgrading to angular7 with rxjs6: in mouseWheelEvent type I am getting "Property 'wheelDelta' does not exist on type 'WheelEvent'" . Do we have any alternative for wheelDelta ? mouseWheelFunc(event: MouseWheelEvent): void { // var event = window.event || event; // old IE support let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); if ( delta > 0) { this.mouseWheelUp.emit(event); } else if ( delta < 0) { this.mouseWheelDown.emit(event); } // for IE event.returnValue = false; // for Chrome and Firefox if ( event.preventDefault) { event.preventDefault(); } } ERROR in

error TS2339: Property 'partition' does not exist on type 'Observable<boolean>'

半世苍凉 提交于 2019-12-05 19:53:45
Previously I was using rxjs-5 and I was using observable.partition as follows: const [isTiming$, isNotTiming$] = this.store.select(state => state.tetris.isTiming) .partition(value => value); After upgrade angular to 8 rxjs got upgraded to rxjs-6 which started throwing following error: providers/timer.provider.ts(27,5): error TS2339: Property 'partition' does not exist on type 'Observable<boolean>'. when I checked in older rxjs implementation it was implemented as follows: import { Observable } from '../Observable'; import { partition as higherOrder } from '../operators/partition'; /** * Splits

Refresh token (JWT) in interceptor Angular 6

…衆ロ難τιáo~ 提交于 2019-12-05 16:00:49
Initially, I had a function that simply checked for the presence of a token and, if it was not present, sent the user to the login header. Now I need to implement the logic of refreshing a token when it expires with the help of a refreshing token. But I get an error 401. The refresh function does not have time to work and the work in the interceptor goes further to the error. How can I fix the code so that I can wait for the refresh to finish, get a new token and not redirect to the login page? TokenInterceptor import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest}

Angular/RxJS 6: How to prevent duplicate HTTP requests?

旧时模样 提交于 2019-12-04 17:02:29
问题 Currently have a scenario where a method within a shared service is used by multiple components. This method makes an HTTP call to an endpoint that will always have the same response and returns an Observable. Is it possible to share the first response with all subscribers to prevent duplicate HTTP requests? Below is a simplified version of the scenario described above: class SharedService { constructor(private http: HttpClient) {} getSomeData(): Observable<any> { return this.http.get<any>(

How to keep observable alive after error in RxJS 6 and Angular 6

 ̄綄美尐妖づ 提交于 2019-12-04 15:50:35
Can anyone help with the scenario where this._getReactions$.next() not working whenever this.http.get(...) gets an error. I want to keep observable alive to take the next input. private _getReactions$: Subject<any> = new Subject(); constructor() { this._getReactions$ .pipe( switchMap(() => { return this.http.get(...) // http request }), catchError(error => { console.log(error); return empty(); }) ) .subscribe(data => { console.log(data) //results handling }); } onClick() { this._getReactions$.next(); } If observable dies it calls it error handler and they are closed you can't send anything

Loop array and return data for each id in Observable

北城余情 提交于 2019-12-04 15:50:08
问题 Using RxJS v6 is challenging to retrieve data from sub collection for every item in the loop. There is no way to iterate throw array that is retrieved from HTTP call. Merge map does it only for single item where there is a requirement to do it on all array items. I've been stuck on this for 3 days. I've tried everything. Problem is that new pipe syntax while provides you with neat way to organise code there is no easy way to loop throw collection of data. It is impossible to use map

How to properly chain rxjs 6 observables?

可紊 提交于 2019-12-04 14:51:20
Any suggestions, how this can be rewritten in more promise-chaining style?: this.apiService.sendPutRequest('/api/users/activate', usrObj).pipe( map(() => { return this.apiService.sendGetRequest('/api/users/' + this.currentUserId).pipe( map(data => { return this.setActiveUser(data).pipe( map(() => { return this.apiService.sendGetRequest('api/tasks/user/' + this.currentUserId).pipe( map(tasks => { return this.taskService.setCurrentUserTasks(tasks); }) ); }) ); }) ); }) ); You can use switchMap for handling observables and tap for side efects handling. And you need to subscribe because it's cold

Angular 6 View is not updated after changing a variable within subscribe

心已入冬 提交于 2019-12-04 09:02:37
问题 Why is the view not being updated when a variable changes within a subscribe? I have this code: example.component.ts testVariable: string; ngOnInit() { this.testVariable = 'foo'; this.someService.someObservable.subscribe( () => console.log('success'), (error) => console.log('error', error), () => { this.testVariable += '-bar'; console.log('completed', this.testVariable); // prints: foo-Hello-bar } ); this.testVariable += '-Hello'; } example.component.html {{testVariable}} But the view

Close subscription on condition with takeUntil()

感情迁移 提交于 2019-12-04 05:51:07
问题 I have a subscription to get providers from a NgRx reducer. I want to use takeUntil() to automatically close the subscription when is finally returns an array that has content: // Fetch providers this.store.pipe(select(reducer.getProviders)) // .takeUntil(reducer.getProviders.length > 0) .subscribe(providers => { if (providers) { this.providers = providers; // takeUntil(/** something **/); } }); Can someone help me with this? I can't figure out how to make use of takeUntil() 回答1: takeUntil

How to import only used operators in RxJS 6 like older RxJS without requiring rxjs-compat?

安稳与你 提交于 2019-12-04 05:25:15
问题 Previously I was able to import only used operators with this code: import 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/finally'; import 'rxjs/add/observable/empty'; import 'rxjs/add/observable/throw'; This generates a small bundle (vendor.ts). How to do this with RxJS without requiring rxjs-compat? Changing the code above to import 'rxjs'; generates a bigger bundle. UPDATE: I followed all