Challenge with the scope of 'this' in Typescript

Whenever I invoke the findFromList function from a component, it triggers this particular error message:

ERROR TypeError: Cannot read property 'searchInArray' of undefined at push../src/app/shared/services/filter.service.ts.FilterService.searchInObject (filter.service.ts:40)

The issue seems to stem from the fact that 'this' no longer refers to FilterService within the searchInObject function.

This is the Angular code snippet for FilterService:

import {Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class FilterService {


  findFromList(list, keyword) {
    return list.filter((el) => this.search(el, keyword));
  }

  search(el, keyword) {
    const type = Array.isArray(el) ? 'array' : typeof el;
    const searchFunc = this.getFuncByType(type);

    return searchFunc(el, keyword);
  }

  getFuncByType(type) {

    const match = {
      'string': this.searchInText,
      'number': this.searchInText,
      'boolean': this.searchInText,
      'array': this.searchInArray,
      'object': this.searchInObject,
    };

    if (typeof match[type] !== 'undefined') {
      return match[type];
    } else {
      throw new Error(`Unknown element type "${type}"`);
    }
  }

  searchInText(text, keyword) {
    return (text.toString().indexOf(keyword) !== -1);
  }

  searchInObject(obj, keyword) {
    return this.searchInArray(Object.values(obj), keyword);
  }

  searchInArray(arr, keyword) {
    return arr.find((el) => this.search(el, keyword)) !== undefined;
  }
}

Answer №1

The reason for this behavior is due to the object specified in the getFuncByType method. This causes the reference of this to point to that specific object instead of the FilterService class. To resolve this issue, update the definition as follows:

const match = {
  'string': this.searchInText.bind(this),
  'number': this.searchInText.bind(this),
  'boolean': this.searchInText.bind(this),
  'array': this.searchInArray.bind(this),
  'object': this.searchInObject.bind(this),
};

Binding each function to this will ensure that the context of the function remains within the class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Associate text with a color from a predetermined list (JavaScript)

As I work on adding tags to my website for blog posts, I have a specific vision in mind. Each tag should be assigned a unique background color selected from a predefined array of theme colors. My goal is to assign the same background color to tags with id ...

Encountering ExpressionChangedAfterItHasBeenCheckedError in Angular 17 even after invoking detectChanges method

I'm encountering a minor problem with Angular and its change detection mechanism. I have created a simple form where additional input fields can be added dynamically. However, every time I click the add button, an ExpressionChangedAfterItHasBeenChecke ...

"Unexpected outcome: Angular's HTTP request for a JSON file yields an undefined

Learning Angular has been a challenging experience for me. I am currently working on reading a json file into a chart on my main app page to visualize temperature data from my PI. Despite trying various methods found online, I have not been successful so f ...

Angular 2 is throwing an error: Unhandled Promise rejection because it cannot find a provider for AuthService. This error is occurring

My application utilizes an AuthService and an AuthGuard to manage user authentication and route guarding. The AuthService is used in both the AuthGuard and a LoginComponent, while the AuthGuard guards routes using CanActivate. However, upon running the app ...

Exploring the Power of ForkJoin in RXJS with Complex Data Structures

I'm looking for a solution using forkJoin to execute an array of objects containing key-value pairs where the value is an observable. The goal is to have each object in the array result in the same key with the corresponding value being the outcome of ...

What is the best way to switch on/off data loading from the server with a click

I have a button with a click event that sends a server request each time it is clicked. The request should only be sent when the condition showVersions is true. The functionality of the button historyBtn should act as a toggle. This has been my attempt: ...

Can you explain the concept of widening in relation to function return types in TypeScript?

Recently, I've observed an interesting behavior in TypeScript. interface Foo { x: () => { x: 'hello' }; } const a: Foo = { x: () => { return { x: 'hello', excess: 3, // no error } }, } I came acro ...

Exploring proactive search using RxJS Observable compared to Subject

Two different methods have been presented for tackling the same issue, which is to conduct a real-time search for specific characters entered by the user in a text box. The first solution is derived from the ngrx example, while the second solution is from ...

What is the process for utilizing a Typescript Unit Test to test Typescript code within Visual Studio?

Currently, I am facing an issue while writing a unit test in Typescript to check a Typescript class. The problem arises when the test is executed as it is unable to recognize the class. To provide some context, my setup includes Typescript (1.4) with Node ...

Manage both the return of an observable and the setting of a value within a single method using

I am in need of a service that can both return an observable and set a value to a field within the same method. The current implementation of my userService.getUserDetails() method is as follows: private requestUrl: string; private bic: string; private i ...

A guide on how to add the chosen item within the same tag using Angular 2

I am trying to choose an item and then add the same item within the same tag, similar to how tags are selected when asking a question on Stack Overflow. This is my template: <div class="form-group" *ngFor="let i of show"> <label for="examp ...

What is the most effective way to utilize getStaticPaths in a dynamic manner within next.js

There is a need to paginate static pages for each of the 3 blog categories, but the problem lies in the variable number of pages and the inability to access which category needs to be fetched in getStaticPaths. The project folder structure appears as foll ...

Angular 2 module that is loaded lazily - service does not follow singleton pattern

After successfully implementing lazy loading modules into my application, I have ensured that the app.module.ts is properly configured. @NgModule({ declarations: [ AppComponent, HeaderComponent, HomeComponent ], imports: [ BrowserMod ...

The sequence of output in TypeScript when using Gulp is similar to running tsc with a tsconfig

After setting up a tsconfig file and successfully running the command-line tsc, I encountered an issue when using gulp-typescript with a tsconfig.json and outFile specified. The output ordering was different, and I have been unable to find a solution in Gu ...

Enhancing collaboration: Seamlessly sharing interface/interface/model files in the integration of

Currently, I am engrossed in developing an application with an Express backend and Typescript whilst utilizing Angular for the frontend. The only snag I'm facing is that I require interface/models files from the backend to be accessible on the fronten ...

Launching the API using Modal in Angular 6

I'm seeking assistance on how to trigger a delete API request after confirming in a modal dialog using Angular. onDelete(id: number) { this.confirmationDialogService.confirm('Confirm Delete', 'Do you really want to delete this ...

How can one easily retrieve the download URL from Firebase Storage paths within Angular templates?

In some instances, I've come across cases where individuals store the actual download path in firestore and then use that image later on in templates. However, I'm not entirely convinced that this is the best approach for saving file locations. ...

What is the reason for an optional object property being assigned the 'never' type?

I'm having trouble understanding the code snippet below: interface Example { first?: number, second?: { num: number } } const example: Example = { first: 1, second: { num: 2 } } function retrieveValue<Object, Key exte ...

Unable to load Angular 2 Tour of Heroes application due to Typescript issue

My Angular 2 Tour of Heroes app seems to be stuck on the "Loading..." screen and I can't seem to figure out why. The angular-cli isn't showing any errors either. I'm currently at part five of the tutorial and it's becoming quite frustra ...

proper method for adding line breaks in json

I am experiencing difficulty in creating a line break using \r\n with the given payload on this particular screen. I am on a quest to determine the correct json payload that needs to be dispatched to the frontend in order for it to register as a ...