Angular2 ng Does not work when retrieving 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;
            });
        }
    }

Inside the method, ngOnInitI can get a list of comments, but the problem is that the list is optional using ngForHTML. This is because HTML renders before the response. But when updating the page data is automatically linked. Did I miss something?

Answer 1

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 the map without returning any value. 2. You are trying to set the values ​​inside the map instead of the subscription, but the values ​​were undefined after it reached the subscription in your ngOnInit

Answer 2

ul , , . - :

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

, comments , Angular , ul DOM, , li per .

Answer 3

async- .

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

Answer 4

ChangeDetectorRef . ChangeDetectorRef, :

private cdr: ChangeDetectorRef

OnInit() detectChanges(), :

this.cdr.detectChanges();

angular2, API OnInit/AfterViewInit ( , ). , .

, , .

Answer 5

ngFor ul

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

or

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

, , , .

, .

    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

, , commentService console.log

Answer 6

 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.    

HTML, 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();
        }

    }

Answer 7

:

//initialize the variable comment 
comments: comment[];  // this is given you have a comment model.

this.classroom, :

this.comments = data | [];