-2

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.

Alberto Valerio
  • 388
  • 2
  • 6
  • 18

2 Answers2

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 => { }
);
ruth
  • 29,535
  • 4
  • 30
  • 57
1

This could be 2 things that I can see.

1.) The this.configurationRemoteService.get('MAX_SECONDS') method returns a string and not an observable. 2.) The getMaxSeconds() expects a subscription to be returned (I think this is the issue).

To address the issues below:

1.) You can update the this.configurationRemoteService.get('MAX_SECONDS') to return an observable by wrapping what is returned with the rxjs of operator. This will create an observable with the value passed as the parameter.

2.) If you need an observable of type string to be returned from the getMaxSeconds() call, you can try to update the method to the code below. Also, as a side note, you will want to complete and unsubscribe on the subscription when the component is destroyed. There are several ways to do this with different operators (take, takeUntil, takeWhile) or creating property for the subscription and calling unsubscribe() when the component is destroyed.

private getMaxSeconds(): Observable<string> {
  return this.configurationRemoteService.get('MAX_SECONDS').pipe(
    map(config => config.value),
    catchError(() => // handle error)
  );
}
Paul
  • 460
  • 2
  • 7