rxjs

How to prevent double click in Angular?

☆樱花仙子☆ 提交于 2019-12-30 04:41:13
问题 I have a component with click . <my-box (click)="openModal()"></my-box> When I click this element, openModal function will run. And I'd like to give 1000ms throttle time in order to prevent opening multiple modals. My first approach was using Subject (from rxJs) //html <my-box (click)="someSubject$.next()"></my-box> //ts public someSubject$:Subject<any> = new Subject(); ...etc subscribe But I feel it's a bit verbose. Next Approach was using a directive . I modified a bit of code that I found

How to load images async with RxJs and perform a method when all loaded

亡梦爱人 提交于 2019-12-30 03:14:28
问题 I am trying to convert my promise based code to RxJs but have a hard time to get my head around Rx especially RxJs. I have a an array with paths. var paths = ["imagePath1","imagePath2"]; And I like to load images in Javascript var img = new Image(); img.src = imagePath; image.onload // <- when this callback fires I'll add them to the images array and when all Images are loaded I like to execute a method on. I know there is Rx.Observable.fromArray(imagepathes) there is also something like Rx

Property 'subscribe' does not exist on type '() => Observable<any>'

两盒软妹~` 提交于 2019-12-30 01:51:11
问题 service file import { Observable } from 'rxjs/Rx'; import { Http,Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export class VideoService { private geturl = '/api/videos'; constructor(private _http:Http) { } getvideos() { return this._http.get(this.geturl).map((response:Response) => { response.json() }); } } here is where the subscribe method showing this error import { VideoService } from '../video.service'; import {

Angular : how to call finally() with RXJS 6

落花浮王杯 提交于 2019-12-30 01:47:16
问题 I was using RXJS 5, now as I upgraded it to 6, I am facing some problems. Previously I was able to use catch and finally but as per update catch is replaced with catchError (with in the pipe) now how to use finally? Also I have some questions : Do I need to change throw->throwError (in below code Observable.throw(err);) import { Observable, Subject, EMPTY, throwError } from "rxjs"; import { catchError } from 'rxjs/operators'; return next.handle(clonedreq).pipe( catchError((err:

Angular 2 change detection with observables

吃可爱长大的小学妹 提交于 2019-12-29 07:45:34
问题 I usually manage to find what I'm doing wrong just browsing existing questions, but here, nothing has helped. I'm working with a simple Ng2 module that attempts to list and update the contents of a NeDB store. Mind you, I have no issues with the NeDB store, I have confirmed that it gets updated correctly, and correctly loaded initially, so the problems I have lie elsewhere. The problems I have are the following: "the async pipe doesn't work". I have this module. @NgModule({ imports:

RxJS Refactor nested map statement

試著忘記壹切 提交于 2019-12-29 07:42:42
问题 I have a service which uses @angular/http to load data from an API. I want to create a projection of the retrieved data for my Components using this data. Therefore I wrote the following code: getById(id: string) { return this.http .get(`https://my-api.io/${id}`) .map(response => response.json()) .map(contracts => contracts.map(contract => # <- Nested map new Contract( contract['id'], contract['description'] ) ) ); } In the 6th line I have a nested map -Statement reducing the readability of

Make a second http call and use the result in same Observable

安稳与你 提交于 2019-12-29 07:08:23
问题 I am using angular 2 and it's http component. I want to call a REST API that will return a list of Elements. The size of that list is limited to 100 entries. If there are more items a hasMore flag will be set in the response. You then have to call the API again with the parameter page=2. It would be nice to have one Observable, with both server responses. My code looks something like this: call({page: 1}) .map(res => res.json()) .do((res) => { if(res.meta.hasMore){ // do another request with

Trying to understand RxJS imports

时光总嘲笑我的痴心妄想 提交于 2019-12-29 06:17:29
问题 I'm having a hard time figuring out how exactly this import statement works (in an Angular application written in Typescript): import 'rxjs/add/operator/toPromise'; I get that rxjs is mapped to the respective node_modules subfolder in the SystemJS config file, but then I'm stuck. I see that there is an index.js file but I don't see whether or how this helps to resolve the add/operator/... part. Similarly, I don't understand this one: import {Observable} from 'rxjs/Observable'; Again, there is

Trying to understand RxJS imports

不羁的心 提交于 2019-12-29 06:17:09
问题 I'm having a hard time figuring out how exactly this import statement works (in an Angular application written in Typescript): import 'rxjs/add/operator/toPromise'; I get that rxjs is mapped to the respective node_modules subfolder in the SystemJS config file, but then I'm stuck. I see that there is an index.js file but I don't see whether or how this helps to resolve the add/operator/... part. Similarly, I don't understand this one: import {Observable} from 'rxjs/Observable'; Again, there is

Rxjs observing object updates and changes

六月ゝ 毕业季﹏ 提交于 2019-12-29 05:58:21
问题 I am currently trying to observe any changes to a given object including all of it's elements. The following code only fires when an object[x] is updates, but not if individually updating object[x]'s elements such as object[x][y] <script> var elem = document.getElementById("test1"); var log = function(x) { elem.innerHTML += x + "<br/><br/><br/>"; }; var a = [{a:1,b:2}, {a:2,b:5} ]; var source = Rx.Observable .ofObjectChanges(a) .map(function(x) { return JSON.stringify(x); }); var subscription