角2はAPI呼び出しのデータをレンダリングできません

Question

角2を使用していて、API呼び出しからのデータをテンプレートに描画する際に問題があります。私のコンポーネントとテンプレートの短い例を投稿してください。

TSファイル

import { Component, OnInit } from '@angular/core'; 
import { GlobalDirective } from '../../../global.directive'; 

export class MainInfoComponent implements OnInit { 

constructor(public globalDirective: GlobalDirective) {} 

logURL() { 
    //returns undefined 
    console.log(this.globalDirective.bgURL); 

} 

ngOnInit() { 
    this.logURL(); 
} 
} 

this.globalDirective.bgURLは、IMGのURLの文字列は、我々はGlobalDirectiveファイルをS3に座っJSONファイルへの呼び出しを行うhttp://www.example.com/myImg.png

言うよですテンプレートにレンダリングしようとしているimgリンクやその他のものを返します。私はコンソールで見ることができるので、正しいデータが返されていることを知っています。

テンプレート

<p>{{globalDirective.bgURL}}</p> <!-- This works --> 
<header [ngStyle]="{'background': 'url(' + globalDirective.bgURL + ')'}"> <!-- Returns undefined --> 

私はPタグ内globalDirective.bgURLをレンダリングすることができる理由を理解しようとしていますが、私は、ヘッダのスタイルとしてそれをレンダリングするかngOnInitでそれをログに記録しようとする場合には、undefinedを返します。

この問題は、JSONリクエストの非同期性に関係していると思います。もし私が望むURLに等しい文字列を設定し、テンプレートでそれがうまく動作するように指定すると。

TSファイル

bgURL: string = 'http://www.example.com/myImg.png'; 

テンプレートの任意の助けを事前に

<!-- This works --> 
<header [ngStyle]="{'background': 'url(' + bgURL + ')'}"> 

おかげで、数日間、この1に対する私の頭を叩きされて。

Answer 1

それがあるべき、

<header [ngStyle]="{'background': 'url(' + globalDirective.bgURL + ')'} ">