TypeError: this.mealService.getCardAssignment is not a function Angular 8

Question

I am using two kendo-grid in one page. For some divine reason the 2nd grid is not working. i am getting these errors enter image description here

my first grid looks like this, which works fine

<kendo-grid [data]="allData"
              kendoGridSelectBy="id"
              [selectedKeys]="mySelection"
              [pageSize]="pageSize" [skip]="skip" [sort]="gridState.sort"
              [pageable]="true"
              [sortable]="true"
              [reorderable]="true"
              [resizable]="true"
              [scrollable]="true"
              [columnMenu]="{ filter: true }"
              (edit)="onEdit($event)"
              (remove)="onRemove($event)"
              (add)="onAdd($event)">

and the 2nd one looks like this

<kendo-grid [data]="cardAssignment"
                      [pageable]="true"
                      [sortable]="true"
                      [reorderable]="true"
                      [resizable]="true"
                      [scrollable]="true">

service to populate the 2nd grid looks like this:

this.mealService.getCardAssignment(bookedByData).subscribe(
      (resp: any) => {
        console.log(resp);
        this.guestsPerEmployee = resp;
      },
      (err: any) => {
        //ON ERROR
      },
      () => {
        //ON Success
        this.loadCardAssignmentGrid();
      }
    );

mealService:

getCardAssignment(params: any) {
    return this.api.post('v1/employees/GetCardAssignment', params);
  }

You need to either bind the callback or an arrow function to use the `this` keyword. See here: https://stackoverflow.com/q/20279484/6513921 — ruth, Nov 15 '20 at 13:10

Himanshu Singh · Answer 1 · 2020-11-15T13:10:15.693

1

You should declare the mealService in the constructor of GateHouseAssignmentCardComponent like shown below:

constructor(private MealService:mealService){}

edited Nov 15 '20 at 13:10

answered Nov 15 '20 at 12:56

Himanshu Singh

2,117
1
5
15

You are right, but this is not valid typescript code. It should be `private mealService: MealService)`. – code-gorilla Nov 15 '20 at 13:09
@code-gorilla thanks for your feedback, corrected it. – Himanshu Singh Nov 15 '20 at 13:11

TypeError: this.mealService.getCardAssignment is not a function Angular 8

1 Answers1