need help data binding with Observables in angular

Question

Is this the correct way to bind data using Observables? if it is, what else is wrong with my code that makes the selectedCourse variable equal undefined?

    this.golfDataService
      .getGolfData(id)
      .subscribe(data => {
        this.selectedCourse = data.data
        console.log(data.data)
      })
    setTimeout(function () { console.log(this.selectedCourse) }, 2000);
  }

I expect both console.log statements to return the same thing, but only the first console.log returns the data, which is an object with golf course information, but the console.log(this.selectedCourse) returns undefined.

change it to setTimeout(() => { console.log(this.selectedCourse) }, 2000); if its fast enought it will return correct value. If you use function it rebinds this to that function context not the component — Xesenix
– Xesenix, Commented Aug 4, 2019 at 23:30
you're creating a closure and a race condition, just not good practice all around, use arrow functions and don't rely on timers — bryan60
– bryan60, Commented Aug 4, 2019 at 23:39

J K · Accepted Answer · 2019-08-04 23:48:11Z

1

Use arrow function. Then again depending on how fast the getGolfData call is, you 'might' get the value logged. The point it, we shouldn't try to use timers to rely on getting the data, instead develop the code in event driven way.

this.golfDataService
  .getGolfData(id)
  .subscribe(data => {
    this.selectedCourse = data.data;
    console.log(data.data);
  });
setTimeout(() => console.log(this.selectedCourse), 2000);

answered Aug 4, 2019 at 23:48

J K

9548 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zabros20 Over a year ago

I did not even think about that, thank you so much! I know to avoid timers, It was just a quick way to see if the data was even binding, thank you again!

Martin Choraine · Accepted Answer · 2019-08-05 07:43:27Z

1

I suggest you to not subscribe Observable in component logic unless you explicitly unsubscribe() subscriptions.

A better approach (less code, less complexity, best performance) is to use async pipe provided by Angular.

 this.selectedCourse$ = this.golfDataService
      .getGolfData(id)
      .pipe(
        map(res => res.data),
        tap(x => console.log(x))
      );

Then in template :

<div *ngIf="selectedCourse$ | async as selectedCourse">
  Hello {{selectedCourse}}
</div>

This approach has a lot of benefits like cleaner code, avoid memory leak, easy migration to OnPush change detection strategy and powerful usage of RxJS.

answered Aug 5, 2019 at 7:43

Martin Choraine

2,4513 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

need help data binding with Observables in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related