Update: The original post has been modified to omit implementation details and complexity.
I am facing an issue with an ngFor loop that invokes a method on a service. The method returns an array which is then iterated over by the for loop.
The click event binding does not function properly when the returned array consists of objects. However, it works fine when the array contains primitive types.
***Notably, contextmenu or right-click events work in both scenarios, indicating that the problem lies specifically with the click event.
***Interestingly, click events immediately preceding and following this particular section work as intended.
***The behavior persists even if I transfer the hardcoded method from the service to the component.
Below is the snippet of code where the issue occurs:
<div><span (click)="addVariable()"></span></div> <!-- works -->
<div *ngFor="let variable of designerService.getVariables();" (click)="onLeftClick()" (contextmenu)="onRightClick()">just a simple div</div> <!-- doesn't work -->
<div><span (click)="addVariable()"></span></div> <!-- works -->
public addVariable() {
alert("add variable");
}
public onLeftClick() {
alert("left click");
}
public onRightClick() {
alert("right click");
}
When utilizing the following implementation (or any other object type array), the click event fails to trigger:
public getVariables(): {name: string}[] {
return [{"name": "dog"},{"name": "cat"},{"name": "bird"},{"name":"bear"}];
}
However, when using this implementation, the click event functions properly:
public getVariables(): number[] {
return [1,2,3,4,5];
}
This issue seems quite straightforward yet persists...
Any suggestions on what might be causing this problem? I feel stuck with Angular at this moment.