CODEWITHSUNDEEP
angularangular2-observables
pajouk
pajouk

Reputation: 115

Subscription not triggering

I'm trying to trigger an event when a variable changes, so it seems that observable is the way to go here is my service:

import { Injectable }     from '@angular/core';
import {Ad} from './../ad/ad';
import {Observable} from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

@Injectable()
export class SearchResultService {
        public ads : Ad[] = [];
        getAdsObservable(): Observable<Ad[]> {
            return Observable.of(this.ads);
        }
}

And the component:

import {Component } from '@angular/core';
import {Ad} from './../ad/ad';
import {SearchResultService} from './../search/searchResult.service';
import {Observable} from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';


    @Component({
        selector: 'map',

        template : '      
            <div #map id="map" class='main_map' ></div> 
            ',

    })
    export class mapComponent  {
        obs;
        subscription: Subscription;
        constructor(
                    private searchResultService: SearchResultService,
                    ){
        this.obs = this.searchResultService.getAdsObservable();


    }
    ngOnInit(){
        this.subscription = this.obs.subscribe(  
            value => {
                console.log('subscribe trigger');

            });
        }

}

Now the problem is, when searchResultService.ads changes (basic new ads are loaded), it does not trigger the subscription

Upvotes: 0

Views: 401

Answers (3)

pajouk
pajouk

Reputation: 115

Thank you, From LLai answer, I managed to get it to work using 

import { Injectable }     from '@angular/core';
import {Ad} from './../ad/ad';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';


@Injectable()
export class SearchResultService {
    public ads : Ad[] = [];
    public ads_observable : BehaviorSubject<Ad[]> ;
    constructor() {
        this.ads_observable = new BehaviorSubject<Ad[]>(this.ads);
    }



    setAds(data){
        this.ads = Ad.toObjectArray(data.ads);
        this.ads_observable.next(this.ads);

    }

}

Upvotes: 0

LLai
LLai

Reputation: 13416

I believe you want a Subject for this. (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md) Essentially you subscribe to the subject, then when something is pushed to the Subject all the observers will receive that value in their success callbacks.

// service.ts
mySubject<Ad[]> = new Subject();
ads: Ad[] = [];

setAd(ad: Ad){
    this.ads.push(ad);
    // anything subscribed to mySubject will receive this.ads when .next() is called
    this.mySubject.next(this.ads);
}

Here is a working plnkr of a Subject (https://plnkr.co/edit/cfWbBIV7hDWRKFfjJlyl?p=preview). Open your console to see the success callback being fired everytime the subject receives a new value. This is basic example of a subject. Note there are different types of Subjects, so I'd recommend going through them and seeing which one best fits your need.

Upvotes: 1

Flow
Flow

Reputation: 580

You may look to ngOnChange, cause you just look at info when the component is initialized, you should ask it to look for data also after a change occurs in your data's flow

cf https://angular.io/guide/lifecycle-hooks

Upvotes: 0

Related Questions