Httpレスポンスデータで* ngForの初期レンダリングに関する問題

Question

私は今日この問題に取り組んでおり、私が間違っていることを理解できないようです。私はそれが私が見落としているシンプルなものだと確信していますが、どんな助けも大歓迎です。

ここに質問があります。 * ngForを使用してアプリケーションIDのリストをレンダリングする単純なコンポーネントがあります。このリストはWeb APIから取得されます。 httpリクエストが期待どおりに機能しているため、ネットワーク上で正しい応答が表示されます。

結果が返ってくると、コンポーネントのローカル変数に配列が割り当てられ、* ngForが変更を認識して画面を適切にペイントすると仮定します。

ブラウザのコンソールにクライアント側のエラーが表示されません。これはAngular 2 RC5です。多分

アプリケーションlist.component.html

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

アプリ-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; 
       }); 
}