Why I get TypeError: undefined is not an object (evaluating '') in Angular?

Question

I have custom service service.center.ts which contains the following delete method:

deleteCenter(id: number): Observable<{}> {
  console.log(id);
  const url = `${this.D_ROOT_URL}${id}`;
  return this.http.delete(url);
}

I have the button in the template:

<button type="submit" (click)="deleteCenter()">Delete</button>

which calls the following method in list-centers.component.ts :

deleteCenter(): void {
  if (this.getCheckedCenters.length > 0) {
    this.getCheckedCenters.forEach(function (id) {
      id = +id;
      this.centers = this.centers.filter(c => c.id !== id);
      this.centerService.deleteCenter(id).subscribe();
    });
  }
}

The this.getCheckedCenters returns the array of ids, and I printed with console.log which returns valid number.

But the method in list-centers.component.ts print error in console, and doesn't call another method in the center.service.ts .

Error:

TypeError: undefined is not an object (evaluating 'this.centers')

centers: Center[];

Data for centers array:

Answer 1

By using foreach(function..., you are losing the this scope. You can try using a lambda foreach(p => {...

This is because of the way typescrypt guarantees scopes in lambdas but not function. You could alternatively use function and a closure