初始呈現* ngFor與Http響應數據問題

我一直在這個問題上今天一直在努力，似乎無法弄清楚我做錯了什麼。我確定它很簡單，我可以忽略，但任何幫助將不勝感激。初始呈現* ngFor與Http響應數據問題

所以這裏的問題。我有一個簡單的組件，應該使用* 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>

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

來源

2016-08-13 Cobster

在瀏覽器中沒有錯誤？我看到你沒有導入應用程序，但你已經定義了：applications：Application [] = []; –

這是複製粘貼錯誤。 – Cobster

'{{app？.id}}'試試這個。內* ngFor嘗試'{{applications | json}}'並告訴我你有沒有獲得任何數據？ – micronyks

這也許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; 
       }); 
}

來源

2016-08-13 04:00:16 micronyks

這個伎倆！謝謝！你碰巧知道爲什麼在這種情況下需要ChangeDetectorRef的原因。我感覺好像我在過去寫過類似的代碼，但並不需要它的用法。 – Cobster

它實際上是關於您的服務，它從（第三方）API獲取數據，當某些事件發生在角度框架之外，而Angular或angular不知道這個角度框架無法運行其綁定循環時。或者用簡單的話來說，某些代碼片段即將用完了Angular框架。 – micronyks

初始呈現* ngFor與Http響應數據問題

回答

相關問題