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?

try to format your code block, so others will be easy to understand your question. — Pengyy
– Pengyy, Commented Mar 16, 2017 at 6:25

Awadhoot · Accepted Answer · 2017-05-10 12:46:12Z

4

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.

answered May 10, 2017 at 12:46

Awadhoot

7477 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc van Nieuwenhuijzen Over a year ago

It's 2020 now. It's still a good work arround but it would be great to to get a real fix.

mobiusinversion Over a year ago

This is the only answer that worked for me. It is really weird that it is now 2021 and this is still broken in Angular. It should just work.

Rob Gwynn-Jones · Accepted Answer · 2017-03-16 03:37:05Z

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.

answered Mar 16, 2017 at 3:37

Rob Gwynn-Jones

6621 gold badge4 silver badges14 bronze badges

1 Comment

Rob Gwynn-Jones Over a year ago

@Krishna this will only work if comments is undefined until your observable has completed. If you initialise it as an empty array then you may want to try *ngIf="comments.length > 0"

Pengyy · Accepted Answer · 2017-03-16 03:39:32Z

1

use async pipe for loading data by observable.

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

answered Mar 16, 2017 at 3:39

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Comments

Julian · Accepted Answer · 2017-03-16 04:34:57Z

0

Try this
template: <ul><li *ngFor="let comment of comments|async"> {{comment.Name}}</li></ul>

comments: Observable<comment[]>;  
    ngOnInit() {      
       this.comments = this.getComments();
    }

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

I see 2 problems in your code 1. You call map without returning any value. 2. You try to set values inside map instead of subscribe but the values was undefined once it reach subscribe in your ngOnInit

edited Mar 16, 2017 at 4:34

answered Mar 16, 2017 at 4:02

Julian

6093 silver badges7 bronze badges

2 Comments

Krishna Over a year ago

I have updated my code as you suggest. but still stuck in the same issue.

mobiusinversion Over a year ago

Why is this the accepted this answer if it did not resolve the issue?

Vinay Prabhakaran · Accepted Answer · 2017-03-16 03:44:27Z

0

Try adding the ngFor in the ul tag

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

or

<ul  *ngFor="let comment of (comments|async)"> <li> {{comment.Name}}</li></ul>`

also maybe you have not pasted your entire code, i don't see a injection of the service component.

you will need to import and inject the service in the component that you want to use it in. In the component constructor

    import {CommentService} from '../path to service'

    constructor(private commentService: CommentService) 
    {

    //you can call the getcomments service here itself or in ngOnInit
    this.commentService.getComments().subscribe(data =>    
                 {    
                   console.log(data)
                  }
    } //end constructor

Hopefully you have tested that your commentService is returning data via console.log

answered Mar 16, 2017 at 3:44

Vinay Prabhakaran

7731 gold badge6 silver badges18 bronze badges

3 Comments

Krishna Over a year ago

I didn't post all the code. I have already imported CommentService on the component. and use @Injectable() decorator on the service all working fine. even i don't have any console error.

Vinay Prabhakaran Over a year ago

did you try adding the code to call the comments service in the constructor

Krishna Over a year ago

yes I tried but comments service in the constructor didn't worked @vinay

Krishna · Accepted Answer · 2017-08-08 10:12:34Z

 I have found a solution of my issue using Zone and promise.
 below is the update code of the "comments.component.ts".
 by using zone.run(), I am able to bind data with HTML when
 "comments.component" is loaded.

Is this a correct way to bind data with HTML if data is coming using api?

    import { Component, OnInit, NgZone } from '@angular/core';  //NgZone *
    import { Router} from '@angular/router'
    import { Comment } from 'comment entity path'
    import {CommentService} from 'comment service path'
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/toPromise'   // *
    @Component({
        template: `<ul  *ngIf="comments && comments.length > 0">
                   <li *ngFor="let item of comments"> {{item.Name}}</li>
                   </ul>`
    })
    export class CommentComponent implements OnInit {
        comments: comment[]=[];   // *

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

        ngOnInit() {

          this.zone.run(() => {
            this.getComments().toPromise().then((data) => {
                this.comments= data || [];
            });
            })
         }

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

    }

Albert Xie · Accepted Answer · 2022-01-17 16:29:39Z

0

Tt's 2022 now, and the issue is still in angular 6. There is another work around is use setTimeout function which will get a dirty check.

ngOnInit() {
   setTimeout(() => {
        this.comments = this.getComments();
   }, 1000);       
}

answered Jan 17, 2022 at 16:29

Albert Xie

1

Collectives™ on Stack Overflow

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

7 Answers 7

2 Comments

1 Comment

Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related