Angular Observable wird nicht aktualisiert, wenn ich abonniere.

Question

Mein Hauptziel ist es, einen Service zu haben, der eine Karte besitzt und eine Observable zurückgibt. Ich möchte die Aktualisierung dieses Observablen abfangen und die Daten in eine Zeichenfolge konvertieren, die ich auf der Benutzeroberfläche anzeigen kann. Ich mache das anderswo, aber es scheint nicht so zu sein, mit Karten zu arbeiten, ich bin mir nicht sicher, was genau passiert. Der Service ist ähnlich:

MyService { 
    myMap: {[index:string]: string}; 

    add(key:string, value:string) { 
     this.map[key] = value; 
    } 

    remove(key:string) { 
     delete this.map[key]; 
    } 

    getMap() Observable<{[index:string]: string}> { 
     return Observable.of(this.map); 
    } 
} 

Und dann in meiner Komponente habe ich einige Dinge ausprobiert, aber kann nicht scheinen, zu erreichen, was ich will. Mein Ziel ist es, alle Aktualisierungen der Karte zu nehmen und sie in einen String konvertieren und meine UI aktualisieren So habe ich versucht, so etwas wie:

MyComponent { 

    constructor(private myService: MyService) { 
    } 

    ngOnInit() { 
     this.myService.getMap().subscribe((update) => { 
      // I would think I would consistently get updated here but this 
      // only hits once. At this point update would be the map and I 
      // would process the data into the string I want to display in the 
      // UI 
     }); 
    } 
} 

Nicht wirklich sicher, wohin sie gehen. Ich mache diese Art von Sache mit Arrays die ganze Zeit und die etwas | Async Technik, aber bin fest.

Answer 1

Ich denke, dass Observable.of ist nicht der Weg zu gehen. Es wird die Karte einmal ausgeben und dann ein vollständiges Ereignis ausgeben. Ich würde vorschlagen, BehaviorSubject stattdessen verwenden, und halten Sie sie manuell synchronisiert:

MyService { 
    myMap: {[index:string]: string}; 
    myMap$ = new BehaviorSubject<{[index:string]: string}>(this.myMap); 

    add(key:string, value:string) { 
    this.map[key] = value; 
    this.myMap$.next(this.map); 
    } 

    remove(key:string) { 
    delete this.map[key]; 
    this.myMap$.next(this.map); 
    } 

    getMap() Observable<{[index:string]: string}> { 
    return this.myMap$; 
    } 
} 

Answer 2

Sie benötigen einen Subject Zeug zum Observable zu senden. So ähnlich:

MyService { 
    mapSource = new Subject()<{[index:string]: string}>(); 

    myMap: {[index:string]: string}; 

    add(key:string, value:string) { 
     this.map[key] = value; 
     this.mapSource.next(this.map); 
    } 

    remove(key:string) { 
     delete this.map[key]; 
     this.mapSource.next(this.map); 
    } 

    getMap() Observable<{[index:string]: string}> { 
     return this.mapSource.asObservable(); 
    } 
}