Need help debugging a subscribe statement where 'this' is always undefined inside it. Specifically, 'this.dataLoaded' is coming up as undefined. How can I ensure that it is defined during debugging?
this.router.events
.filter(event => (event instanceof NavigationEnd))
.subscribe((routeData: any) => {
if(!this.dataLoaded){
...
}
});
Having considered implementing the that = this approach as suggested in the original answer, I strongly recommend exploring Tomas' solution instead. It is worth investing some extra time into and avoiding any reliance on javascript hacks whenever possible.
To illustrate using arrow functions to maintain the context of this, refer to the example below.
The following snippet shows the initial code that caused the loss of the this context:
this.settingsService.getClientSettingsByCategory(clientId, categoryId)
.subscribe(
this.loadJobStatusReport
);
Compare it to the updated version which successfully preserves the desired this context:
this.settingsService.getClientSettingsByCategory(clientId, categoryId)
.subscribe(
settings => this.loadJobStatusReport(settings)
);
When utilizing .subscribe() in Angular, there is a possibility that the context of this may not be retained. In my experience, I have created another reference to this, which has always proven successful for me. It may work for you as well.
var that = this; // Here I am storing the reference of this into another variable called that
this.router.events
.filter(event => (event instanceof NavigationEnd))
.subscribe((routeData: any) => {
if(!that.dataLoaded){ // Here you can utilize that instead of this
...
}
});
Take a look at the closure sections in debugger’s variables tab for more insight. Your actual reference to this will be one level above, where it points to the component controller name. Every anonymous function creates a new closure, with yours being enclosed within the subscribe block. VS Code will automatically open this closure when your breakpoint is hit.
Avoid using outdated JS tricks like let that = this, especially when working with TypeScript, Classes, ES6, and arrow functions as these hacks are unnecessary.
Being new to this, I'm a bit hesitant about whether this is the right approach or not. However, one possible solution could involve utilizing the .bind(this) method.
Check out this example using Angular TypeScript:
this.myService.getData().subscribe((data=>{
this.doSomething(data);
alert(this.somethingElse);
}).bind(this));
It became clear to me that there is a significant distinction between
a.subscribe(function(x){ ... }) // <-- in this case 'this' refers to a
and
a.subscribe(x => { ... }) // <-- here, 'this' refers to the current class context
As a result, I consistently opt for the latter approach and no longer require the use of something like var self = this
Currently, I am facing an issue with my Angular 2 router module. Whenever I try to access the link /city, I encounter an error message saying 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activat ...
I recently created a brand new Angular 9 application with a submodule. Here are my app.modules.ts: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from & ...
In some cases, Typescript's type checking is helpful, but there are times when I believe I know better. I wish there was a way to specify "From this point on, consider variable x as type y" const array = ["foo", {bar: "quz"}]; array.forEach((it) =&g ...
In my code, I have a loop on rxDetails that is supposed to add a new field payAmount if any rxNumber matches with the data. However, when I run the forEach loop as shown below, it always misses the rxNumber 15131503 in the return. I'm not sure what I ...
In my Ionic 4 multilingual app, I am fetching data from an API based on the selected language. I have set up an event for this purpose, but I face an issue when the event value does not exist - in such cases, I want to run a default function. Below is the ...
I recently added PWA functionality to my Angular 8 app by running the command: $ ng add @angular/pwa --project my-app After setting up the necessary files for a PWA as described here, I encountered no errors during development. However, upon deploying t ...
Examining a confirmation dialog in Angular 8 has led to an interesting discovery: one test passes while others fail, even though they are quite similar. The tests being conducted are for three statuses: Approve, Reject, and Reset. Interestingly, the test f ...
Whenever I apply the font-weight bold in jspdf, it seems to cause the text to lose its spacing. You can compare the before and after images below which were extracted from the pdf file generated: https://i.stack.imgur.com/0BPWP.png Below is the code snipp ...
Below is the GET method implemented in the UsersController public IEnumerable<object> Get() { var con = _context.Database.GetDbConnection(); var cmd = con.CreateCommand(); cmd.CommandType = CommandType.StoredProcedure; cmd.CommandTex ...
I'm a beginner with Angular and I'm working with reactive Angular forms. In my form, I have two password fields and I want to ensure that only one password is updated at a time. If someone tries to edit both Password1 and Password2 input fields s ...
I'm currently using @mui/x-date-pickers version 6.10.0 and I need to customize the color and format for a specific section in the mobile view. How can I achieve this? I want to display the date as "May 31st" like shown in the image below. Is there a ...
I'm currently developing an authorization system for my express application using JWT and storing them in cookies to maintain user sessions. The issue I'm encountering is that when attempting to log out, the cookies are not being deleted despite ...
Struggling with implementing a system for manual entry of mutual fund information, I am running into errors when trying to read properties from the 'fund' model in my application. The Developer Tools console is displaying the following error mess ...
I am facing an issue while trying to access a state property that I have passed through NavLink into a component. Despite using useLocation as recommended, I seem to be struggling with it due to some typescript error. Here is the code snippet: import Reac ...
I am currently facing a compatibility problem involving isomorphic-dompurify and dompurify in my Next.js 13 project. It appears that both libraries are incompatible due to their dependencies on canvas, and I am struggling to find a suitable alternative. M ...
Among the Observable methods, which ones utilize "subscribe" for obtaining the result? For instance, flatMap subscribes to the first Observable's outcome and passes it over without subscribing again. Is there a foolproof way to determine ...
Here is my recreation of a small portion of my project on StackBlitz. I am encountering 4 issues in this snippet: I aim to restrict the user to only one mat-chip. I attempted using [disabled]="selectedOption >=1", but I do not want to disable ...
To showcase my project, I've created a demo on StackBlitz. I successfully implemented routing in my Angular application. You can find the code on StackBlitz. The sample consists of two components: AppComponent LoginComponent By default, when the ...
I am seeking to create a custom type that will enable me to specify a property for a react component: type CustomType<T> = { base: T; tablet?: T; desktop?: T; }; export type ResponsiveCustomValue<T> = CustomType<T> | T; This ...
In my Angular 7 application, I am displaying a background image in a div. However, there are instances when the link to the image is broken. The way I bind the image in my HTML is as follows: <div [ngStyle]="{'background-image': 'url(&a ...