CODEWITHSUNDEEP
angularobservablesubscribe
Gibran Shah
Gibran Shah

Reputation: 1109

Can't subscribe to observable: Property '_isScalar' is missing in type ‘Subscription'

I’m working with an angular 6 application. I have an observable that won’t let me subscribe to it. I need to subscribe to it in order to set my loading flag to false to indicate that the data is done loading.

Here’s what I mean:

My page looks like this:

<div *ngFor="let element of watermelons$ | async">
…
</div>

Watermelons$ is an observable that gets loaded like this:

ngOnInit() {
    …
    this.watermelons$ = this._watermelonService.getWatermelon(true, this._watermelonId);
    …
}

I also have a flag to indicate whether the watermelon data is loading or not:

Private _loading : boolean;
…
constructor(…) {
    this._loading = true;
}

On the page, I have a spinner that shows if _loading is true:

<div class="app-loading" *ngIf="_loading">
  <mat-spinner diameter=100></mat-spinner>
</div>

I’d like to be able to turn the spinner off by setting _loading to false. Normally, I would do this in the subscription to watermelon$ like so:

ngOnInit() {
    …
    this.watermelons$ = this._watermelonService.getWatermelon(true, this._watermelonId)
    .subscribe(watermelonData => {
        this._loading = false;
    });
    …
}

But it won’t let me subscribe. When I try this, I get the following error:

Type 'Subscription' is not assignable to type 'Observable<Object>'.
  Property '_isScalar' is missing in type ‘Subscription'.

What does this mean and how do I fix it? Is there another way of detecting when the data is loaded and then set _loading to false?

Upvotes: 0

Views: 3059

Answers (2)

Neji Sghair
Neji Sghair

Reputation: 174

This is beacause you are assigning the subscription to this.watermelons$ and not the observable. And async pipe in the template require an observable

Try to decouple the assignment line from the subscription line

Upvotes: 0

Paul
Paul

Reputation: 51

It's possible somewhere along the line you're importing from 'zen-observable' instead of 'rxjs'. Checkout your import statements in your typescript or javascript files.

I know this is a bit late but for the sake of others running into the same problem I thought it was still worth posting.

Upvotes: 1

Related Questions