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 'comment entity path'
import {CommentService} from 'comment service path'
import { Observable } from 'rxjs/Observable';
@Component({
    template: ` <ul><li *ngFor="let comment of comments|async"> {{comment.Name}}</li></ul>`
})
export class CommentComponent implements OnInit {
    comments: Observable<comment[]>;  

    constructor(private router: Router, private commentService: CommentService) {
    }

    ngOnInit() {
        this.comments = this.getComments();
    }

    getComments() {
        return this.commentService.getComments();
    }

}

comment.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Comment } from 'comment path here';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class CommentService {
    private commentUrl = 'api path';  // URL to web api

    constructor(private http: Http) {
    }

    getComments(): Observable<Comment[]> {
        return this.http.get(this.commentUrl).map(
            (response) => {
                let data = response.text() ? response.json():[{}];
                if (data) {
                    console.log(data);
                    return data;
                }
                return data;
            });
        }
    }

Within ngOnInit method I am able to get list of comments but the problem is the list is not binding using ngFor on the HTML. This is because HTML is rendering before the response. But On refreshing page data binds automatically. Am I missing something?

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.

Answer 2

One solution would be to only display your ul once your comments have been loaded, which would then force a refresh. So something like:

<ul *ngIf="comments"><li *ngFor="let comment of comments">{{comment.Name}}</li></ul>

So once comments has been loaded, Angular will force a refresh, and the ul will be added to the DOM, at which point it will have all the data it needs to bind an li per comment.

Answer 3

use async pipe for loading data by observable.

<li *ngFor="let comment of comments | async">