Question

我今天整天都在研究这个问题，似乎无法弄清楚我做错了什么。我确信它的东西很简单，我可以忽略，但任何帮助都会非常感激。

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

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

我发现浏览器控制台中没有列出客户端错误。这也是Angular 2 RC5。

应用list.component.html

＆＃13;

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

＆＃13;

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

使用Http响应数据初始呈现* ngFor时出现问题

1 个答案: