angular2 ngFor not working while fetching data from api on ngOnInit()

Question

comment.component.ts:

import { Component, OnInit } from \'@angular/core\';
import { Router} from \'@angular/router\'
import { Comment } from         


        

Answer 1

You can use ChangeDetectorRef class to forcefully detect changes for a component and it's child components. You will need to create class property of type ChangeDetectorRef like following:

private cdr: ChangeDetectorRef

After you load data in OnInit(), just call detectChanges() method to manually run change detection:

this.cdr.detectChanges();

I am having same issue with angular2, calling API from OnInit/AfterViewInit and bindings are not updated in view (select dropdown array not populated inside view). Above approach worked for me, but root cause is still unknown to me.

Please direct me to the root cause for this issue as I am unable to find one.