38564

Is it possible to update Observable with own data in Angular2 / Typescript?

Question:

I have an ngFor with async like that:

<div *ngFor="let location of googleSearchLocations | async"> <div *ngFor="let location of facebookSearchLocations | async">

and this is my component:

private searchTerms = new Subject<string>(); googleSearchLocations: Observable<GoogleLocation[]>; facebookSearchLocations: Observable<FacebookLocation[]>; ngOnInit(): void { this.googleSearchLocations = this.searchTerms .debounceTime(300) .switchMap(term => term ? this.locationService.getGoogleLocations(term) : Observable.of<GoogleLocation[]>([])); this.facebookSearchLocations = this.searchTerms .debounceTime(300) .switchMap(term => term ? this.locationService.getFacebookLocations(term) : Observable.of<FacebookLocation[]>([])); } search(term: string): void { this.searchTerms.next(term); }

To populate both arrays I use search method with a value from the input.

Now at some point I wanted to hide the divs by just assigning an empty array which will hide the data (like in non-async case). But it appeared to be more complex than I thought, since assigning null or new Observable breaks future updates. So is there a way to somehow do "next" or send some data to observable directly (an empty array in my case)?

I know I can just push it to the searchTerms, but is not desired since it will hide both divs at the same time + it will use the debounce value.

Answer1:

You could do the following. You keep your code but merge the subject into it. This would look like this:

let subject = new Subject(); this.googleSearchLocations = this.searchTerms .debounceTime(300) .switchMap(term => term ? this.locationService.getGoogleLocations(term) : Observable.of<GoogleLocation[]>([])) .merge(subject);

If you know want to clear the list. You could just do

subject.next([]);

This doesn't mess with the original searchTerms stream and allows you to clear the result immediately and only for one of the two.

You can provide two different subject for the two (google and facebook) so you could clear them both separately at your time of choosing.

Jsbin with a similar example can be found here: <a href="http://jsbin.com/pagilab/edit?js,console" rel="nofollow">http://jsbin.com/pagilab/edit?js,console</a>

It first emulates result being found and clears the result with an empty array after 2seconds.

Recommend

  • Is it possible to update Observable with own data in Angular2 / Typescript?
  • CSS: How to change position : relative to fixed and preserve “left” and “top” values
  • Cannot read property 'title' of undefined in angular2 [duplicate]
  • withLatestFrom operator does not tick on null value
  • How to delay forkJoin
  • Angular 2 reSTARTable timer
  • Rxjs: Missing property error with lettable operators
  • How to get a txt file from a jar in tomcat7
  • How to set dynamic Access-Control-Allow-Origin based on Origin HTTP request header in Spring Framewo
  • Define an in-memory JobRepository
  • Java Caching frameworks for maintaining huge data
  • Listview - list item selection and initial setting (custom made items)
  • Web service not returning integer data in an object [duplicate]
  • How can I count unique terms in a plaintext file case-insensitively?
  • Creating UDF with VSTO in Excel
  • How to set an entity field that does not exist on the table but does exists in the raw SQL as an ali
  • how to query for min or max inet/cidr with postgres
  • In C what exactly happens if i use () to initialize a double dimension array instead of the {}?
  • sweetalert2 inputoptions from file in select example
  • What Makes These Two Array Adds Different?
  • Image map in Flex
  • Laravel: Getting Session ID oddly truncates when using foreach
  • Selenium to click on a javascript button corresponding to a text
  • Allowing both email and username for authentication
  • Yii2: Config params vs. const/define
  • Google Custom Search with transparent background
  • Insert into database using onclick function
  • Spring security and special characters
  • What is Eclipse's Declaration View used for?
  • Can I make an Android app that runs a web view in Chrome 39?
  • Trying to switch camera back to front but getting exception
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • Programmatically clearing map cache