I'm encountering an issue where a property of my class undergoes an unintended transformation.
import { Draggable, DragTarget } from '../Models/eventlisteners';
import { HeroValues } from '../Models/responseModels';
import { Util } from './Util';
export class Heroes implements Draggable, DragTarget {
static instance: Heroes;
hostElement: HTMLDivElement = document.getElementById(
'app'
)! as HTMLDivElement;
templateElement: HTMLTemplateElement = document.getElementById(
'tmpl-hero-overview'
) as HTMLTemplateElement;
element: HTMLCollection;
heroes!: HeroValues;
imagesLoaded: number = 0;
constructor() {
const importedNode = document.importNode(
this.templateElement.content,
true
);
this.element = importedNode.children as HTMLCollection;
}
async retrieveHeroes() {
// The code to retrieve and process hero data...
}
render() {
// Code for rendering heroes...
}
dragStartHandler(event: DragEvent) {
// Handler for drag start event...
}
// Other event handler methods...
configure() {
// Configuring the event listeners...
}
private updateDOM() {
// Updating the DOM after loading images...
}
static getInstance() {
// Singleton pattern implementation...
}
}I've isolated the issue to this particular section of code. When I access this.element, which is an HTMLCollection needed for later use, it behaves unexpectedly. Initially, in the first two console.logs, it displays the expected properties that were defined in the constructor. However, after the second forEach-loop, it loses all its properties and has a length of 0.
I attempted creating a copy of this.element before the forEach loop by using a variable with Array.from(this.element).slice(), but it did not resolve the problem.
I then considered if Array.from() inadvertently transforms this.element, but according to the documentation, it creates a copy rather than altering the original.
Could anyone provide assistance with this issue?
Edit: I opted not to include my entire code as the problem appears to be pinpointed. However, I can share more if necessary.