angular2 ngFor 在 ngOnInit() 上从 api 获取数据时不工作

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;
            });
        }
    }

在 ngOnInit 方法中，我可以获得评论列表，但问题是该列表未在 HTML 上使用 ngFor 进行绑定(bind)。这是因为 HTML 在响应之前呈现。但是在刷新页面时数据会自动绑定(bind)。我错过了什么吗？

Answer 1

您可以使用 ChangeDetectorRef 类来强制检测组件及其子组件的更改。您需要创建类型为 ChangeDetectorRef 的类属性，如下所示:

private cdr: ChangeDetectorRef

在 OnInit() 中加载数据后，只需调用 detectChanges() 方法即可手动运行变化检测:

this.cdr.detectChanges();

我对 angular2 有同样的问题，从 OnInit/AfterViewInit 调用 API 并且绑定(bind)没有在 View 中更新(选择下拉数组未填充在 View 中)。上述方法对我有用，但我仍然不知道根本原因。

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