Angular2 Observer goes missing

Question

I am having trouble sticking to an observer. I have a component which creates an observable, and in the callback, I catch the observer. But later, I cannot get that observer - as if I have another instance of component.

Example:

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'users-table',
  templateUrl: './components/users/users-table.html',
  // template: '<button (click)="popup({value: 2})">Clickme</button>'
})
export class UsersTableComponent {

  public userClicked$: Observable<any>;
  public observer: any;
  public thing: number;
  constructor() {

    console.log('Starting UsersTable component');
    this.thing = 1;
    this.userClicked$ = new Observable(observer => {

      this.thing = 2;
      console.log('Observer received:', observer);
      this.observer = observer;
      this.observer.next('Val 1'); // I receive this in an outside component
    }).share(); // This supposedly makes the observable *hot*
  }

  public handle(value) {

    console.log('Value:', value);
    console.log(this.userClicked$);
    console.log('thing:', this.thing); // This is set back to "1
    this.observer.next(user);       // this.observer is undefined
                                    // so it fails here
  }
}

Note that I'm subscribing to this from another component, and I do get that initial test value ('val 1')

The other component is listening, subscribing in "ngAfterViewInit", basically like this:

this.usersTableComponent.userClicked$.subscribe(val => { console.log('heard ya:' val); });

Am I missing something obvious? Can I somehow use click handler directly to pass that clicked user thing? (a row in the table)?

Angular2 Beta 8.

Günter Zöchbauer · Accepted Answer · 2016-03-29T16:21:28.973

1

the callback passed to new Observable(observer => { ... }) is only executed when this.userClicked$.subscribe(...) is called, therefore, without subscribers there is no this.observer.

Just skip emitting in this case:

this.observer && this.observer.next(user);

edited Mar 29 '16 at 16:21

answered Mar 29 '16 at 16:00

Günter Zöchbauer

623,577
216
2,003
1,567

Well I am subscribing to this from another component - and I'm getting that initial value. I've even made it hot, lemme update. – Zlatko Mar 29 '16 at 16:01
Just check `this.observer && this.observer.next(user);` there is not point in emitting an event if you don't have subscribers. – Günter Zöchbauer Mar 29 '16 at 16:03
Thanks. I've edited the question to make it clear that I *do* subscribe, and I *do* get that initial _Val 1_ that I emit. The later one does not get sent, because it seems as if my template sees a different instance of the component. – Zlatko Mar 29 '16 at 16:05
I guess we need to see the other component and how you subscribe to it. I used quite similar code in my answer to this question (incl. Plunker) – Günter Zöchbauer Mar 29 '16 at 16:12
Yep, I did that. Do you have a link to that plunker somewhere? Thanks for all the help, btw, really appreciate it. – Zlatko Mar 29 '16 at 16:19
Ups, forgot to post the link ;-p http://stackoverflow.com/questions/36267119/detect-change-of-nested-property-for-component-input/36267274#36267274 – Günter Zöchbauer Mar 29 '16 at 16:19
How do you get the reference to the `UserTableComponent` (`this.userTableComponent`)? – Günter Zöchbauer Mar 29 '16 at 16:22
tried both as a provider and through constructor. Doesn't work, it's a different instance. I've tried now moving the whole thing to a third service shared among these two components, but I can't get observer there either. And the shared service is set as a provider at the app level (app.providers = [sharedService], among other thigns) – Zlatko Mar 29 '16 at 16:33
1

Can you create a Plunker? – Günter Zöchbauer Mar 29 '16 at 16:36
Accepting the answer although my problem was dependency tree - I didn't get the same instance from where I was listening. – Zlatko Mar 29 '16 at 21:15

Angular2 Observer goes missing

1 Answers1