Angular Service получает данные JSON

Question

Я пытаюсь получить некоторые сохраненные данные json из localalstorage с помощью этого кода на Angular 8:

getState(key: string) {
  return this.state$.pipe(map(obj => obj[key]));
} 

, но когда я делаю это:

console.log(this.appState.getState('state1'));

Не возвращаетсяданные проанализированы.

Но когда я делаю это:

var result = JSON.parse(localStorage.getItem('state1'));

Возвращает результат, который я хотел.

Мой вопрос:

Как можноЯ изменяю этот метод:

getState(key: string) {
  return this.state$.pipe(map(obj => obj[key]));
} 

... так, чтобы он возвращал результаты как JSON.parse?

Вот весь код сервиса:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AppStateService {

  private appState = {};
  private state$;

  constructor() {
    this.state$ = new BehaviorSubject(this.appState);
  }

  initState() {
    Object.keys(localStorage).forEach(key => {
      if (localStorage[key][0] === '{') { this.appState[key] = JSON.parse(localStorage[key]);
      } else {
        this.appState[key] = localStorage[key];
      }
    });
    this.state$.next(this.appState);
  }

  setState(key: string, value: any, persist: boolean = false) {
    this.appState[key] = value;
    this.state$.next(this.appState);
    if (persist) {
      if (typeof value === 'object') { localStorage[key] = JSON.stringify(value);
      } else {
        localStorage[key] = value;
      }
    }
  }

  getState(key: string) {
    return this.state$.pipe(map(obj => obj[key]));
  }

}

Answer 1

в соответствии с нотацией $ и .pipe после нее, похоже, что this.state $ дает вам наблюдаемое. Так что вы должны подписаться на него. Если вы не подписываетесь, вы не видите данные.

this.appState.getState('state1').subscribe(result => {
  console.log(result);
});

Но будьте осторожны, если, как вы сказали, this.state$ является Поведенческим субъектом, вы должны вручную отписаться от него в своем ngOnDestroy:

private mySubscription: Subscription;

myMethod() {
  this.mySubscription = this.appState.getState('state1').subscribe(result => {
    console.log(result);
  });
}

ngOnDestroy() {
  if(this.mySubscription) { // must check it if you don't subscribe in your constructor. If you do it in your constructor, no need to check if it is defined.
    this.mySubscription.unsubscribe();
  }
}

Если вам нужно только текущее значение, без повторного вызова при изменении значения, вы также можете получить его синхронное значение:

console.log(this.appState.getState('state1').value);