Call function in event handler

Question

I'm getting an ID from event handler now I want to call my service method using this ID but I'm getting method undefined error. please correct me because I am new to Angular. ERROR TypeError: Cannot read property 'getTaxByCategory' of undefined

component.ts

categoryChanged(event: any){
  //console.log(event.previousValue);
  this.categoryId = event.value;
  this.taxService.getTaxByCategory(this.categoryId).subscribe(result => {
    console.log(result);
  })
}

service method

public getTaxByCategory(categoryId: number): Observable < any > {
  return this.taxes = this.apollo.watchQuery<Query["taxGet"]>(
    { query: taxGetByCategory, variables: { categoryId } }
  ).valueChanges.pipe(map(({ data }: { data: any }) => {
    console.log("returned Data");
    return data.taxGet;
  }));
}

HTML

<dxi-item itemType="group">
            <dxi-item   [label]="{ text: '  Category ' }"
            dataField="categoryId"
            alignment="right"
            editorType="dxSelectBox" 
            [editorOptions]="{
                items: category,
                placeholder: 'Select Category ',
                displayExpr: 'categoryName',
                valueExpr: 'id',
                showClearButton: 'true',
                onValueChanged: categoryChanged
                 }">
              </dxi-item>

@ritaj Cannot read property 'getTaxByCategory' of undefined. — Random, Apr 29 '19 at 09:42
@AqibHafeez Show the all TS related code specially related to `taxService` — Prashant Pimpale, Apr 29 '19 at 09:43
@AqibHafeez Show the TS Code where you have declared/ inject a `taxService` — Prashant Pimpale, Apr 29 '19 at 09:50
@AqibHafeez Because the problem is your `taxService` is `undefined` -> so it could be you have missed `@Injectable()` decorator or wrong injection in the component — Prashant Pimpale, Apr 29 '19 at 09:52
But this method is working fine in ngOnInit(), I am getting undefined error when I call this in my event handler — Random, Apr 29 '19 at 09:54
@AqibHafeez can you add the exact error you are getting to your question? — Daniel Cottone, Apr 29 '19 at 09:54
@AqibHafeez `But this method is working fine in ngOnInit(), I am getting an undefined error when I call this in my event handler` --> Good! Now post the code which will be useful to reproduce an issue like HTML control for who's you have bound the event — Prashant Pimpale, Apr 29 '19 at 09:56
@AqibHafeez and please also add the relevant code in question not in comment sections. — Farhat Zaman, Apr 29 '19 at 09:56

score 3 · Accepted Answer · answered Apr 29 '19 at 10:27

The problem is when passing the onValueChanged: categoryChanged the categoryChanged has its own reference to this (this is no longer the component). Change the categoryChanged to arrow function to make this work.

Arrow functions preserve the reference of this when they're passed further.

categoryChanged = (event: any) => {
  //console.log(event.previousValue);
  this.categoryId = event.value;
  this.taxService.getTaxByCategory(this.categoryId).subscribe(result => {
    console.log(result);
  })
}

You can find more info about that in this SO question

Call function in event handler

1 Answers1