Почему функция подписки не вызывается в angular 2?

Question

Я использую наблюдаемые в угловых. На самом деле моя проблема, когда я нажимаю кнопку мой subscribe функция не называется почему? согласно документации subscribe функция будет вызывать, когда мы вызываем next функция

https://plnkr.co/edit/83NaHoVaxiXAeUFoaEmb?p=preview

constructor() {
  this.data = new Observable(observer => this.dataObserver = observer);
  this.data.subscribe(value => {
    console.log('+++')
    console.log(value)
  })
}

hndle(){
  this.name.push({name:"navee"});

  this.dataObserver.next(this.name);
}

вот документация

http://reactivex.io/rxjs/manual/tutorial.html

Answer 1

По предложению Владимира Билячата я изменил ваш код. его работа сейчас плз проверить. Проблема была в вашем способе использования dataObserver

     //our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <ul>
      <li *ngFor ="let n of name">{{n.name}}</li>
      </ul>
      <button (click)="hndle()">heelo</button>
    </div>
  `,
})
export class App {
  private data:Observable;
  private dataObserver:Observer;
  name:string;
  name[];
  constructor() {
        this.dataObserver = new Observable(observer => this.dataObserver = observer);
 this.dataObserver.subscribe(value => {
    console.log('+++')
    console.log(value)
  });
  }

  hndle(){

    this.name.push({name:"navee"});

    this.dataObserver.next(this.name);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

ссылка https://plnkr.co/edit/PO80y2udrOhsVq4QQXc5?p=preview

Answer 2

Я считаю, что вы подписываетесь на наблюдаемую 2 раза. Вы должны быть в состоянии исправить это, добавив.share()

constructor() {

    this.data = new Observable(observer => this.dataObserver = observer).share();
   this.data.subscribe(value => {
    console.log('+++')
    console.log(value)

  })
  }

  hndle(){
    this.name.push({name:"navee"});

    this.dataObserver.next(this.name);
  }

Answer 3

В вашем случае лучше использовать это решение:

constructor() {
    this.data = new Subject();

    this.data.subscribe(value => {
        console.log('+++');
        console.log(value);
    });
}

hndle() { // TYPO: Probably it was meant to be handle
    this.name.push({ 
        name: 'navee'
    });

    this.data.next(this.name);
}

Не забудьте добавить:

import { Subject } from 'rxjs/Subject'

Рабочий пример:

https://plnkr.co/edit/zB8FHTVEm2QUHiEAYuQB?p=preview