0

I have a component named Grid, its template is:

<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>

and a parent component with the content:

<div *ngFor="let entireGrid of ser.Grids">
    <app-grid [item]="ser.entireGrid"></app-grid>
</div>

In my parent component ts I have this constructor:

constructor(public ser:myService){
ser.getGrids().subscribe(data=>{
data.grids.foreach(g=>{
ser.grids.push(g);
});
});

and myService has the variable:

grids:Array<Grid>=[];

my problem is - each entireGrid is nested very deeply (inside it there are many rows and inside them many cols and inside them many grids and inside them many rows again...) so when I reshow the parent component the deepest grids don't appear, only when I click on one of the grids that does appear they appear. I've tried to put cd.detectChanges in the grid component in the functions ngOnInit , ngAfterViewChecked , ngDoCheck but nothing worked. does somone have an idea how to solve it?

Tammar
  • 25
  • 6

2 Answers2

0

  1. Provide entireGrid via Observable and async pipe that would refresh it inpure:

    this.entireGrid = of(entireGrid);

    <app-grid [item]="entireGrid | async">

  2. In place you define entireGrid create new reference:

    this.entireGrid = { ...entireGrid };

kamil
  • 41
  • 9
  • Where to put this.entireGrid = of(entireGrid);? – Tammar Oct 12 '20 at 10:44
  • In your component.ts which is container of – kamil Oct 12 '20 at 10:46
  • What is this 'of'? I tried to put this line in the constructor of the component and I got the error: Cannot find name 'of'. – Tammar Oct 12 '20 at 10:54
  • it is RXJS operator [of](https://www.learnrxjs.io/learn-rxjs/operators/creation/of). But if you are not familliar with it better try creating new object reference. – kamil Oct 12 '20 at 10:59
  • I didn't understane the second option. can you explain a little more? – Tammar Oct 12 '20 at 11:02
  • Could you edit your question and add there parent.component.ts, so I could update how code should look there :)? – kamil Oct 12 '20 at 11:06
  • I have now updated it. Note that now the parent.component.html is a bit more complex... – Tammar Oct 12 '20 at 11:31
  • Read this [https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit](Why you should use ngOnInit instead of constructor in such situations ...) and I would answer question in new topic – kamil Oct 12 '20 at 12:51
0

Im not sure if it would work because still it is a part from your code but try this...

if this would not work, edit your question and put there code from myService

parent.component.ts:

grids: Observable<Grid[]> = this.ser.getGrids().pipe(
    map({grids} => grids)
);

constructor(public ser:myService) {
}

parent component content:

<div *ngFor="let entireGrid of grids | async">
     <app-grid [item]="entireGrid"></app-grid>
</div>
kamil
  • 41
  • 9