A particular component called Grid has been implemented with the following template:
<div *ngFor="let row of item.rows">
<div *ngFor="let col of row.cols">
<div *ngFor="let grid of col.items">
<app-grid [item]="grid"></app-grid>
<!-- another content -->
</div>
</div>
</div>
Additionally, there is a parent component which includes the following content:
<div *ngFor="let entireGrid of ser.Grids">
<app-grid [item]="ser.entireGrid"></app-grid>
</div>
The constructor in my parent component ts file is as follows:
constructor(public ser:myService){
ser.getGrids().subscribe(data=>{
data.grids.foreach(g=>{
ser.grids.push(g);
});
});
Within myService, there exists a variable:
grids:Array<Grid>=[];
The issue at hand involves deep nesting within each entireGrid (comprising rows, columns, and nested grids). When I revisit the parent component, the deepest grids fail to appear initially. Only after clicking on one of the displayed grids do they then become visible.
I have attempted incorporating cd.detectChanges in various lifecycle hooks in the grid component such as ngOnInit, ngAfterViewChecked, and ngDoCheck, yet none have proven effective.
If anyone has insights or potential solutions to resolve this complication, please share it would be greatly appreciated.