rxjs-observables

RxJS - Using pairwise to confirm and revert input field

 ̄綄美尐妖づ 提交于 2021-02-10 15:41:21
问题 So I'm a little new to observables, I'm struggling with a scenario, and I thought it might be a good candidate for an SO question. Here we go... The scenario is this: I have a drop-down field; when it is changed, I want to check a condition based on the previous and new values of the field request from the user a confirmation if the condition passes, and ... then revert the value of the field if the user did not confirm. Here's the code with comments: ngOnInit(): void { // I am waiting for my

Angular 10 call finalize() when nested observables complete

拥有回忆 提交于 2021-01-29 18:17:20
问题 finalize nested observables after the last item is processed. Stackblitz finalize() should be called when the observables complete - all the numbers (11, 12, 13) are output. How should the observables be nested? import { from } from "rxjs"; import { map, finalize } from "rxjs/operators"; //emit (1,2,3) const data = [ { userId: 1, id: 1 }, { userId: 1, id: 2 }, { userId: 1, id: 3 } ]; const source = from(data); //add 10 to each value const example = source.pipe(map(val => add(val.id))); /

Angular/RxJS update piped subject manually (even if no data changed), “unit conversion in rxjs pipe”

ε祈祈猫儿з 提交于 2021-01-29 14:30:55
问题 I am working on an app using Angular 9 and RxJS 6.5. The functionality I have problems with uses Angular services to fetch some data from a server and provides this data to views (using RxJS behaviorSubjects). Before passing that data to the views though, I want to do some unit conversion, so that the user can use a toggle/switch to change between two units for the entire app, specifically "metric tons" and "short tons". While the actual conversion functions are provided within a dedicated

How to correctly subscribe Angular HttpClient Observable?

感情迁移 提交于 2021-01-29 13:55:37
问题 Taking example of HeroService from angular documentation. Below is a POST method in HeroService addHero (hero: Hero): Observable<Hero> { return this.http.post<Hero>(this.heroesUrl, hero, httpOptions) .pipe( catchError(this.handleError('addHero', hero)) ); } We can see that every time addHero is called a new Observable is returned. Ok now here is the service call from HeroComponent this.heroesService .addHero(newHero) .subscribe(hero => this.heroes.push(hero)); Now In my component this add

Angular app - User login, logout and session reload with Observables

给你一囗甜甜゛ 提交于 2021-01-29 07:10:58
问题 This is a followup question for another question I had posted, which remains half-solved: RxJS shareReplay() does not emit updated value I am creating an Angular app and I'm trying to use Observables extensively. The problem is with creating a UserService class which has an observable user$ which can be piped to throughout the application to get the currently logged in user. The currently accepted answer (by @DeborahK - she had been very patient with me) is a great solution, but has a bug - A

RxJS - How to incrementally increase the delay time without using interval?

可紊 提交于 2021-01-20 09:24:30
问题 I want to incrementally increase the delay for this: const source = from(839283, 1123123, 63527, 4412454); // note: this is random const spread = source.pipe(concatMap(value => of(value).pipe(delay(1000)))); // how to incrementally increase the delay where the first item emits in a second, the second item emits in three seconds, the third item emits in five seconds, and the last item emits in seven seconds. spread.subscribe(value => console.log(value)); I'm aware of using interval to

Detecting change of a BehaviorSubject component member variable updated in a subscribe block?

匆匆过客 提交于 2021-01-16 04:32:33
问题 I have an element in a component view: <div>Progress: {{ progress$ | async }}</div> It is supposed to be updated in a continuous way by a next() call in a subscribe() block: progress$: BehaviorSubject<number> = new BehaviorSubject(0); downloadSoundtrack(soundtrack: Soundtrack): void { const fileName: string = soundtrack.name + '.' + MIDI_FILE_SUFFIX; const progress$: Observable<ProgressTask<Uint8Array>> = this.midiService.progressiveCreateSoundtrackMidi$(soundtrack); console.log('Created the

Detecting change of a BehaviorSubject component member variable updated in a subscribe block?

[亡魂溺海] 提交于 2021-01-16 04:26:14
问题 I have an element in a component view: <div>Progress: {{ progress$ | async }}</div> It is supposed to be updated in a continuous way by a next() call in a subscribe() block: progress$: BehaviorSubject<number> = new BehaviorSubject(0); downloadSoundtrack(soundtrack: Soundtrack): void { const fileName: string = soundtrack.name + '.' + MIDI_FILE_SUFFIX; const progress$: Observable<ProgressTask<Uint8Array>> = this.midiService.progressiveCreateSoundtrackMidi$(soundtrack); console.log('Created the

Synchronous blocking subscribe call to a custom ReplaySubject based observable

[亡魂溺海] 提交于 2020-12-10 06:37:39
问题 The view contains the element: <div *ngIf="showMe">Hello</div> When calling the component method: downloadDemo(): void { this.download$ = this.downloadService.downloadUrlAsBlobWithProgressAndSaveInFile('assets/skypeforlinux-64.deb', 'demo') this.download$.subscribe((download: Download) => { this.showMe = true; console.log('Progress: ' + download.progress); }) } the element shows in the view before all the Progress loggers. And that is how it should be. This HTTP based downloading works just

Synchronous blocking subscribe call to a custom ReplaySubject based observable

丶灬走出姿态 提交于 2020-12-10 06:37:07
问题 The view contains the element: <div *ngIf="showMe">Hello</div> When calling the component method: downloadDemo(): void { this.download$ = this.downloadService.downloadUrlAsBlobWithProgressAndSaveInFile('assets/skypeforlinux-64.deb', 'demo') this.download$.subscribe((download: Download) => { this.showMe = true; console.log('Progress: ' + download.progress); }) } the element shows in the view before all the Progress loggers. And that is how it should be. This HTTP based downloading works just