data - observable angular 6 example

El servicio Angular2 Observable BehaviorSubject no funciona

Question

Estoy intentando crear mi propio servicio observable, pero después de obtener los datos iniciales del servicio, las actualizaciones del servicio no se propagan a los suscriptores. El servicio se ve así:

import { Injectable } from ''@angular/core'';
import { Observable, BehaviorSubject } from ''rxjs/Rx'';

@Injectable()
export class DataService {
  keys : number[] = [4,5,1,3,2];
  private data :BehaviorSubject<number[]> = new BehaviorSubject(this.keys);

  constructor() {};

  public setKey(i:number, val:number) :void {
    this.keys[i]=val;
    this.data.next(this.keys);
  }
  public getData() :Observable<number[]> {
    return new Observable(fn => this.data.subscribe(fn));
  }
  public getKeys() :number[] {
    return this.keys;
  }
}

el componente que utiliza el servicio obtiene los datos iniciales muy bien. Ese componente obtiene sus datos en el constructor:

constructor(public dataService: DataService) {
    dataService.getData().subscribe(data => {
      console.log("Gotcha!");
      this.data.datasets[0].data = data)
    });
};

Lo que da un Gotcha en el registro de la consola. Pero después de actualizar los datos con setKey (2,3) en algún otro lugar, esperaba el this.data.next (this.keys); para enviar datos a todos los suscriptores y los datos se actualizarán dentro de ese componente en consecuencia. pero no se envían datos a los suscriptores ..

Pensé que había descubierto los Observables, pero por favor, no seas amigable si me estoy perdiendo el punto aquí;) ¡cualquier indicador en la dirección correcta será muy apreciado!

Answer 1

Cada vez que emita un valor, debe crear un nuevo objeto en lugar de emitir el mismo objeto mutado. Eso lo protegerá de los problemas de detección de cambios. Sería mejor asignar siempre un nuevo Objeto a this.keys cuando lo cambies.

this.data.next([...this.keys]);

Puedes usar asObservable() aquí

public getData(): Observable<number[]> {
  return this.data.asObservable();
}

También compruebe lo que dijo Günter Zöchbauer . ¿Está prestando el servicio como un singleton?

Answer 2

Enfrenté el mismo problema en algún momento. Es probable que la razón sea que su servicio no es un singleton, es decir, que cada suscriptor obtiene una nueva instancia. Al contrario de Angular 1, en A2 los servicios no son singletons.

Si desea tener una instancia del servicio compartida por múltiples servicios / componentes, póngala en los providers de su principal @Component o @NgModule .

@NgModule({
  declarations: [],
  imports: [],
  bootstrap: [AppComponent],
  providers: [DataService]
})
export class AppModule {
}