Angular - Calling method on service from component returns undefined

Question

I have this service in the services file which is an http call.

    export class BackendServices {
      addons: IAddons[];   
      constructor(private http: HttpClient) { 
        this.getWorkOrders();
      }
     getAddons() {
      this.http.get<IAddons>(this.BASE_URL + '/addons/')
      .subscribe((data: any) => {
          this.addons = data;
      });
    }

COMPONENT PART Then from my main component I have a button which calls the modal dialog. Here is the code of the main component:

export class OrdersComponent { 
openAddonsDialog() {
    let dialogRef = this.pickAddonsDialog.open(PickaddonsComponent);
  }
}

And then I am calling the getAddons method which is on the service from the constructor of the dialog. I am just wondering how do we make the modal dialog open only when the addons property has received data from the http call.

export class PickaddonsComponent implements OnInit {
    constructor(public bs: BackendServices) {
        this.bs.getAddons();
    }

But it says this.service.getAddons() is undefined. Read a lot about this on stackoverflow, tried quite a few steps from different posts, but none helped me so far.

Your error is for addons: IAddons[] and not getAddons(). If ur image is correct, can you check whether addons is not private — Shashank Vivek
– Shashank Vivek, Commented May 13, 2018 at 9:21
what about getAddons() ? the error is for addons and not getAddons(). Can you share your code. Your screenshot contradicts with your question — Shashank Vivek
– Shashank Vivek, Commented May 13, 2018 at 9:26

Tomislav · Accepted Answer · 2018-05-13 18:56:17Z

1

It seems that initialized BackendService has attribute addons undefined. Which is true. Because it is set only when calling method getAddons.

Try this:

export class BackendServices {
  addons: IAddons[] = [];   
  constructor(private http: HttpClient) { 
    this.getWorkOrders();
  }
 getAddons() {
  return this.http.get<IAddons>(this.BASE_URL + '/addons/')
  .subscribe((data: any) => {
      this.addons = data;
  });
}

Replacing

 addons: IAddons[];

with

 addons: IAddons[] = [];

edited May 13, 2018 at 18:56

answered May 13, 2018 at 10:05

Tomislav

7506 silver badges7 bronze badges

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

10 Comments

Sumchans Over a year ago

Thanks @Tomislav. That seems to be in the right direction, In the component I have a button that calls a modal dialog and it is in the modal dialog constructor that I call the getAddons method, when i click on button the first time the dialog opens with nothing on it,, but when I click it second time it populates. How do we get around that.

Sumchans Over a year ago

How do I make the dialog open up only when the addons property has values loaded onto it.

Tomislav Over a year ago

It would be great if you could show some more code. But I suggest that, maybe, you extract your logic of calling getAddons from dialog constructor. Try calling your dialog after getting data from the server. But be aware that getAddons currently doesn't return anything and maybe it should return a Promise.

Sumchans Over a year ago

Thats exactly what I am looking for. How do I make it to return a promise, not sure how to code it. As requested I have updated the post with more code.

Tomislav Over a year ago

Method getAddons just has to return this.http.get() because $http.get() method returns a promise itself. I will update my answer above.

|

Collectives™ on Stack Overflow

Angular - Calling method on service from component returns undefined

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related