Как вернуть Observable внутри подписки? - PullRequest
Новая
       37

Как вернуть Observable внутри подписки?

0 голосов
/ 04 марта 2020

РЕДАКТИРОВАТЬ: См. Ответ Курта Гамильтона для решения.

Я звоню API, чтобы вернуть значения некоторых настроек в settings.service.ts. В settings.component.ts их необходимо вернуть для заполнения формы - он отображает загрузку, когда вызов API еще не завершен.

Он работает с функцией return of (fakeData). Тем не менее, я не могу понять, как вернуть 'realData'.

Вместо console.log (realData) я хочу вернуть это вместо fakeData.

Некоторая помощь была бы хороша, заранее спасибо!

Ниже приведены соответствующие части кода.

settings.service.ts: 

export interface Settings {
  setting1: boolean;
  setting2: string;
}

const fakeData = {
  setting1: true,
  setting2: 'test'
};

@Injectable()
export class SettingsService {
  defaultSettings: DefaultSettings[];

  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    this.apiService.getDefaultSettings().subscribe( defaultSettings => {
      // defaultSettings is needed for when value1 or value2 is 'null'
      // not implemented yet, but therefore this nested subscription structure
      this.defaultSettings = defaultSettings;

      const value1 = this.apiService.getSpecificSetting('setting1');
      const value2 = this.apiService.getSpecificSetting('setting2');

      forkJoin([value1, value2]).subscribe( result => {
        const realData = {
          setting1: result[0],
          setting2: result[1],
        };

        console.log(realData);
        // return of(settingsFound); not possible here ...
      });
    });

    return of(fakeData);
  }
}

settings.component.ts 

settings: Observable<Settings>;

ngOnInit() {
  this.settings = this.settingsService.loadSettings().pipe(
    tap(settings => {
      this.settingsForm.patchValue(settings);
    })
  );
}

1 Ответ

2 голосов
/ 04 марта 2020

Используйте concatMap или switchMap для запуска новой наблюдаемой (в вашем случае forkJoin) после другой наблюдаемой. 

@Injectable()
export class SettingsService {
  defaultSettings: DefaultSettings[];

  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    return this.apiService.getDefaultSettings().pipe(
      // save default settings
      // this may not be required if you only need default settings for the forkJoin
      tap(defaultSettings => this.defaultSettings = defaultSettings),
      // now run the next observable
      concatMap(defaultSettings => {
        return forkJoin({
          setting1: this.apiService.getSpecificSetting('setting1'),
          setting2: this.apiService.getSpecificSetting('setting2')
        });
      }),
      // now map the result of the forkJoin to the value to want to return
      // map won't be required in this case, 
      // as the arg going into forkJoin matches the desired return structure
      // I left it in for completeness
      map(result => {
        const realData = {
          setting1: result.setting1,
          setting2: result.setting2,
        };

        console.log(realData);

        return realData;
      })
    );
  }
}

сжатая версия

Без моих аннотаций и избыточных вызовов готовый результат выглядит так: 

@Injectable()
export class SettingsService {
  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    return this.apiService.getDefaultSettings().pipe(
      concatMap(defaultSettings => forkJoin({
        setting1: this.apiService.getSpecificSetting('setting1'),
        setting2: this.apiService.getSpecificSetting('setting2')
      }))
    );
  }
}
...