Access to the private property defined within a component is restricted when trying to retrieve it within a callback function

During the demonstration, I declared the following in my app.component.ts just before the constructor

private testObjArray = []

In the ngOnInit method, the following code is present:

ngOnInit() {

    console.log('test 1', this.testObjArray);

    this.testObjArray = [1];

    console.log('test 2', this.testObjArray);

    this.databaseService.getNotification()
    .on('child_added', function (obj) {
        console.log('test 3', this.testObjArray); 
    })
}

This snippet is from the database.service.ts file:

getNotificationsForCurrentUser() {
    let currentUser = this.userService.getCurrentUser()
    let ref = firebase.database().ref('notifications/')
    return ref;
}

Even though the .on event seems to be triggered since there is data in the database, I'm facing an issue accessing properties declared at the beginning of the app. The output on the console for the above code is:

test 1 []
test 2 [1]
FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'testObjArray' of null
EXCEPTION: Cannot read property 'testObjArray' of null

I am looking for a way to reference this.testObjArray inside the .getNotification().on function so that I can update my template accordingly.

Answer №1

One common issue encountered is that `this` inside the callback function does not refer to your class context; instead, it is bound to the object that triggered the event.

An effective solution is to utilize ES6 arrow functions, which will properly capture the correct `this`:

ngOnInit() {

    console.log('test 1', this.testObjArray);

    this.testObjArray = [1];

    console.log('test 2', this.testObjArray);

    this.databaseService.getNotification()
    .on('child_added', (obj) => { // Arrow function used here
        console.log('test 3', this.testObjArray); //
    })
}

Alternatively, you can store the reference to `this` before entering the callback:

ngOnInit() {

    console.log('test 1', this.testObjArray);

    this.testObjArray = [1];

    console.log('test 2', this.testObjArray);
    let that = this; // Store `this` reference here
    this.databaseService.getNotification()
    .on('child_added', function (obj) {
        console.log('test 3', that.testObjArray); // Utilize stored reference here
    })
}

Answer №2

When you use the this keyword within a function, it actually refers to the function object itself. To access the desired this, you can assign it to a variable outside the function. This creates a closure where the context of this is preserved for later use.

ngOnInit() {

    console.log('test 1', this.testObjArray);

    this.testObjArray = [1];

    console.log('test 2', this.testObjArray);

    var that = this;

    this.databaseService.getNotification()
    .on('child_added', function (obj) {
        console.log('test 3', that.testObjArray); 
    })
}

Answer №3

It is necessary to attach this:

function (obj) {
    console.log('test 3', this.testObjArray); // <--- the issue lies here
}.bind(this)

Alternatively, you can utilize a lambda expression (arrow function), which is an es6 feature.

(obj) => console.log('test 3', this.testObjArray)

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

Angular 7, RxJS 6, and Ngrx: Error with Reducer and entity adapter regarding nonexistent property 'accounts'

The error message I'm encountering is as follows: ERROR in src/app/account/account.reducers.ts(24,37): error TS2339: Property 'accounts' does not exist on type '{ account: Account; } | { accounts: Account[]; }'. Property 'a ...

Learn the process of transferring a complete JSON object into another object using Angular

I'm having trouble inserting one object into another. My JSON object is multidimensional, like this: { "item1":{ "key":"Value", "key":"Value" }, "item2":{ "key ...

An Issue with Ionic Modal Dismissing

During the development of a small app, I encountered an interesting "bug" that I believe is worth mentioning here. The issue revolves around a modal that contains a simple login form. Upon submitting the form data, it triggers the login() method as shown i ...

When conditional types are used to pass unions through generics, the assigned value defaults to 'any' instead of

In search of a universal type to implement in my actions. Actions can vary from simple functions to functions that return another function, demonstrated below: () => void () => (input: I) => void An Action type with a conditional generic Input h ...

Utilize Regular Expression Constant Validator in Angular 8's Reactive Formbuilder for efficient data validation requirements

Is there a way to efficiently store and reuse a Regex Validator pattern in Angular while following the DRY principle? I have a reactive formbuilder with a Regex validator pattern for ZipCode that I need to apply to multiple address forms. I'm interes ...

Adjusting the definition of a class method in TypeScript or JavaScript

In my code, I have a class defined as follows: class A { constructor() {} myMethod() { console.log('in my method'); } } I am looking to create a method that will take in a className and methodName like so: modifyClassMethod(cla ...

React TypeScript: Handling OnChange Events for Different Input Types

I am confronted with multiple input fields: <label> <span className="codes__input-label">Count</span> <input type="number" value={this.state.count} onChange={this.onInputChange} /> </label> ...

What is causing this *ngFor loop to display the data twice?

My NG Bootstrap Accordion element is behaving strangely - when open, it should display a list of contact cards. However, the list of contacts generated by the ngFor loop is duplicated and shown twice. Surprisingly, the data source and debugger confirm that ...

What could be the reason for mocha failing to function properly in a project that is set up

During a unit test in my TypeScript project using mocha, I encountered an issue when setting the project type to module. The error message displayed is as follows: ➜ typescript-project yarn test yarn run v1.22.17 warning package.json: No license field $ ...

Run a command to engage with the user and then display a new page

Currently, I'm exploring the documentation in search of a solution for the following scenario: Imagine the user is on a form page and decides to go back. I want to prompt a verification message like "Are you sure you want to discard your changes?". D ...

Explicit final argument in TypeScript

Is it feasible to define a function in TypeScript 2.7.2 and above with variable parameters, but ensuring that the final parameter has a specific type? I am attempting to craft an ambient TypeScript declaration for a JavaScript library that utilizes functi ...

Do you have any recommendations for exporting a PDF that includes one set of data but has two rows of headings?

I've encountered a challenge. I have been using jspdf with autotable to generate simple reports consisting of one row of headings and one body of data, which has worked flawlessly so far. My current setup involves Angular 8. However, I now need to c ...

Organizing Data in Angular 2

I'm trying to modify this code so that it can sort both A-Z and Z-A using a single button. The current code only sorts from A-Z and doesn't work in reverse order. Here is the code I have, but it's not functioning correctly. sortType(sort: s ...

Dealing with Incoming HTML Content from Backend in Angular 5

My backend is sending me HTML with a Facebook login, but the observable is attempting to parse it before I can make any changes... I'm having trouble explaining this issue to search engines, so any help understanding the professional terms related to ...

What could be the reason for the variable's type being undefined in typescript?

After declaring the data type of a variable in TypeScript and checking its type, it may show as undefined if not initialized. For example: var a:number; console.log(a); However, if you initialize the variable with some data, then the type will be display ...

What is the best way to test a Nest Bull queue using Jest with dependency injection through @InjectQueue?

When working with an Injectable that utilizes a queue through the @InjectQueue decorator: @Injectable() export class EnqueuerService { constructor ( @InjectQueue(QUEUE_NAME) private readonly queue: Queue ) { } async foo () { return this.qu ...

Is there a way to cancel or undo a transaction in the middle of using the PayPal JavaScript SDK?

As a newcomer to Angular, I am working on integrating PayPal as a payment gateway. However, I am unsure of the correct procedure to follow. paypal .Buttons({ createOrder: (data, actions) => { return actions.order.create({ purchase_ ...

Issue with Angular 5 form validation for required fields not being resolved

I am currently diving into the world of Angular 5 with TypeScript, as a complete beginner. My current project involves constructing a form and implementing validation. However, I seem to be encountering some issues in getting it to work properly. Here&apo ...

ngx-scroll-event activated, yet remains elusive

After updating my project from Angular 7 to 8 smoothly, I proceeded with the update to Angular 9. Suddenly, the project was unable to find the required [email protected] package, resulting in a "module not found" error: Cannot find module 'ngx-sc ...

Ideas for Building a Robust Web Application: Frameworks and Database Options

Currently, I am working on developing a web application that I hope will be of large scale. This application will need to handle numerous users and store vast amounts of data, requiring a robust database system. I find myself in a dilemma when it comes to ...