It appears that the buttons are being iterated correctly using ngFor, and upon inspection they have the correct attributes. However, when clicked, the function in the controller sometimes claims the parameter is 'undefined', happening randomly about half the time.
Here's the error message I'm encountering: ERROR TypeError: Cannot read property 'value' of undefined at (the line where the attribute is passed as a parameter in the controller)
Previously, everything worked fine when all the logic was contained within its controller. Recently, I refactored it to utilize a service + interceptors. So far, I've incorporated the headers and params in the service.
The strange thing is that everything functions properly in Firefox without any errors, but Chrome seems to be the only browser experiencing this bug. If I continue clicking on it, errors persist until suddenly it starts working again. You can view a screen recording here:
Note: If I refrain from repeatedly clicking -- nothing occurs. Checking the network tab reveals that the http call isn't triggering at all.
Code snippet below:
Front end:
<div *ngFor="let button of lvl0 | errorfix">
<!-- Buttons reiterated with ngIF -->
<button mat-raised-button color="accent" [attr.data-param1]=" button['md:0/413349530_Level 0 – Section'] | lvl0clean "
class="lvl0button" (click)="reveallvl1($event)" (click)="stepper.reset()" (click)="resetAllSteps()">
{{ button['md:0/413349530_Level 0 – Section'] | lvl0clean }}
</button>
</div>
Service:
initialisingDocs() {
let headers = new HttpHeaders();
headers = headers.append(
"Authorization",
"Basic " + btoa("SOMETHINGSOMETHING")
);
headers = headers.append(
"Content-Type",
"application/x-www-form-urlencoded"
);
return this.http.get(this.ROOT_URL + "initialising", { headers });
}
Controller:
constructor(private service: DocsService) {
// Initializing the first set of buttons
this.lvl0 = this.service.initialisingDocs().subscribe(data => {
this.lvl0 = data;
console.log(this.lvl0);
});
}
For the next level of buttons:
reveallvl1($event) {
this.service
.lvl1Docs($event.target.attributes["data-param1"].value) **// <<ERROR LINE>>**
.subscribe(data => {
this.lvl1 = data;
console.log(data);
this.step1Folder($event.target.attributes["data-param1"].value);
});
}