angular - Error: Type 'string' is not assignable to type 'Subscription'. How can I convert/parse this?

Question

I am trying to get a simple string from my database using an Observable. I've done it like this before and haven't had any problems.

Configuration is a simple object with just an id: number and a name: string.

I'm calling this function from a ForkJoin.

Here is my code:

  private getMaxSeconds() {

  let maxSeconds = this.configurationRemoteService.get('MAX_SECONDS_VIDEOGRAMMETRY_SMALL')
    .subscribe(config => {
      maxSeconds = config.value;
    }, error => console.log(error));

    return maxSeconds;
  }

ForkJoin code(reduced version):

forkJoin([
        this.getMaxSeconds(),
      ]).subscribe(response => {
        this.MaxSeconds= response[0] as string;
});

But this time, I'm getting this error: Type 'string' is not assignable to type 'Subscription'.

The only difference is that now I am declaring the variable with let in the function.

How can I convert or parse this Suscription into a string?

I'm using TypeScript 4, Angular 8 and Laravel 4 for the API.

Answer 1

You aren't declaring the variable in the function but straight up initializing it with the subscription. Instead you need to declare it. Try the following

private getMaxSeconds() {
  let maxSeconds: string;

  this.configurationRemoteService.get('MAX_SECONDS').subscribe(
    config => {
      maxSeconds = config.value;
   },
    err => { }
  );

  return maxSeconds;     // <-- WRONG! Will return `undefined`

And you cannot return the async variable maxSeconds synchronously like you're trying. By the time the return statement is executed, maxSeconds wouldn't be initialized yet and it'll return undefined. Instead any statements that depend on the async call get('MAX_SECONDS') should be inside the subscription.

You could find more information about asynchronous data here.

Update: use with forkJoin

RxJS forkJoin takes in observables as arguments, so can directly use this.configurationRemoteService.get('MAX_SECONDS'). And if you wish to use only the value from it's notification, you can pipe in a map to it.

Try the following

forkJoin(
  this.configurationRemoteService.get('MAX_SECONDS').pipe(map(res => res['value'])),
  // 2nd observable,
  // 3rd observable
).subscribe(
  ([value, res2, res3]) => {
    console.log(value);    // <-- `value` property from `this.configurationRemoteService.get('MAX_SECONDS')`
    console.log(res2);     // <-- notification from 2nd observable argument
    console.log(res3);     // <-- notification from 3rd observable argument
  },
  err => { }
);