带有 Http 响应数据的 *ngFor 初始呈现问题

Question

我今天整天都在处理这个问题，似乎无法弄清楚我做错了什么。我敢肯定，我忽略了一些简单的事情，但我们将不胜感激。

所以问题来了。我有一个简单的组件，它应该使用 *ngFor 呈现应用程序 ID 列表。此列表是从 Web api 检索的。 http 请求按预期工作，我在网络上看到了正确的响应。

返回结果后，我将数组分配给组件中的一个局部变量，并且我假设 *ngFor 会识别更改并适当地绘制屏幕。

我在浏览器控制台中没有看到任何客户端错误。这也是 Angular 2 RC5。

应用程序列表.component.html

<h3>Applications</h3>
<ul>
  <li *ngFor="let app of applications">{{ app.id }}</li>
</ul>

app-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Application } from './application';
import { ApplicationService } from './application.service';

@Component({
    selector: 'sng-application-list',
    template: require('./application-list.component.html'),
    providers: [ ApplicationService ]
})
export class ApplicationListComponent {
    errorMessage: string;
    applications: Application[] = [];

    constructor(private applicationService: ApplicationService) { }

    ngOnInit() {
        this.getApplications();
    }

    getApplications() {
        this.applicationService.getApplications()
            .subscribe(
                applications => {
                    this.applications = applications
                },
                error => {
                    this.errorMessage = <any>error;
                });
    }
}

Answer 1

这可能是 AngularZone 的问题。你应该试试这个，

import { Component, ChangeDetectorRef } from '@angular/core';

constructor(private applicationService: ApplicationService,
            private cdr:ChangeDetectorRef) { }             //<----added

 getApplications() {
        this.applicationService.getApplications()
            .subscribe(
                applications => {
                    this.applications = applications;
                    this.cdr.detectChanges();              //<-----addded
                },
                error => {
                    this.errorMessage = <any>error;
                });
 }