Currently, I am in the process of developing a web application using Angular. In this project, there is a parent component and multiple child components that receive data from an rxjs Subject.
One of the child components is being used in another section of the application and is functioning properly, although it is not being utilized within an *ngFor structure.
Despite having only one element in the "entries" array, the web app freezes. Even when I try to initialize the component without sending any messages, the issue persists.
The problem seems to stem from an infinite loop occurring while calling a getter method (validEntries).
This specific component works fine in other areas of the application as intended.
Below are snippets from the parent.component.html and child.component.html files:
<div class="option" *ngFor="let entry of entries">
<app-options-previewer [events]="optionsChanged" [index]="0"></app-options-previewer>
</div>
<mat-chip color="primary" selected *ngFor="let entry of validEntries">{{entry.name}}</mat-chip>
<mat-chip color="primary" *ngIf="validEntries.length==0">No option selected</mat-chip>
In addition, here is the faulty getter code:
get validEntries(): Array<CommandEntryOption> {
console.log("valid entries get");
if (this.entries !== undefined)
return this.entries.filter(function (value) { return value.quantity > 0 });
else
return [];
}
Current Outcome: Application freezes Desired Outcome: Each entry in the "entries" array should correspond to a child component.
If more information is required, please let me know.