從Web API正確接收數據，但無法使用Angular2 / TypeScript顯示它們

Question

我試圖顯示從Web API接收到的信息，但我認為組件中缺少某些內容。

服務工作中的呼叫（我收到帶有所有應用程序的代碼200） 應用程序列表

但是然后，我只想在控制台中顯示它們，但它沒有填滿表格。

ngOnInit(){
        this.getApplications();
        console.log(this.applications);
    }


getApplications() {
        this.applications = [];
        this._UCCXCiscoService.getApplications().subscribe(
            res => {
                this.applications = res;
            },
                    error => this.errorMessage = <any>error
        );
    }

    // Model

export interface Application {
    self: string;
    ScriptApplication: ScriptApplication;
    id: string;
    applicationName: string;
    type: string;
    description: string;
    maxsession: number;
    enabled: string;
}

export interface ScriptApplication {
    script: string;
    scriptParams: ScriptParam[];
}

export interface ScriptParam {
    name: string;
    value: string;
    type: string;
}

export interface RootObject {
    type: string;
    application: Application[];
}

我的模型很好，我很確定。 我認為這是方法getApplications（）錯了，但找不到原因...

在此先感謝您的幫助，

弗洛里安

編輯1：我的服務中的getApplications（）代碼

@Injectable()
export class UCCXCiscoService {

    public headers:Headers = new Headers({ 'Content-Type': 'application/json' ,'Authorization': 'Basic User + mdp'});

    constructor(private http: Http) {
    }

    getApplications() {
        let options = new RequestOptions({ headers: this.headers });
        return this.http.get('API URL', options)
            .map(data => <Application[]> data.json().application)
            .catch(this.handleError);
    }

是的，此方法有效，並向我返回了應用程序（如應用程序列表中的圖片所示）。 出於隱私原因，我沒有在此處輸入api網址和密碼^^'

編輯2： 組件的getApplications（）和服務的響應

編輯3：

 <div class="contentPage"> <div class="pageTitleHeaderContainer"> <div class="pageTitle"> <span>Cisco</span> </div> </div> <div class="subContent"> <message-to-user messageToUser={{messageToUser}} messageLevel={{messageLevel}}></message-to-user> <table class="table table-hover table-condensed"> <th>Id</th> <th>Nom</th> <tr *ngFor="#application of applications"> <td>{{application?.id}}</td> <td>{{application?.applicationName}}</td> </tr> </table> </div> </div> 

Answer 1

您正在使用ngOnInit（）方法在控制台上進行打印，即在執行訂閱代碼之前，因此在填充應用程序屬性之前。 在this.applications = res之后緊接着將console.log（）方法移到subscribe（）的箭頭功能內。

Answer 2

因此，感謝社區，我發現了我的問題。 首先，console.log（）不在正確的位置。 然后我需要更改ngFor來顯示信息，現在可以正常使用了！

您可以閱讀我的帖子的評論，以找到答案。