Angular2でapiからデータを受け取ったときに、cssクラスにURLを挿入します。

Question

私はIMDb APIからデータを取得しているAngular 2プロジェクトに取り組んでいます。この場合、データを受信するたびに（ユーザーが映画を検索した場合）、映画のポスター/イメージを表示する必要があります。

HTML

<div class="column small-12 medium-8 movie-information gutter-large-up end"> 
    <div class="gutter-xxsmall-up"> 
     {{MovieFromImdb.Title}} 
    </div> 
    <div> 
     {{MovieFromImdb.Year}} 
    </div> 
    <div> 
     {{MovieFromImdb.Rating}} 
    </div> 
    <div> 
     {{MovieFromImdb.Genre}} 
    </div> 
    <div class="movie-picture"> 
      // Image here 
    </div> 
</div> 

CSS

.movie-picture { 
    height: 20rem; 
    width: 15rem; 
    position: absolute; 
    top: 0.5rem; 
    background: url(''); 
    background-size: cover; 
    left: 0.5rem; 
    border: 1px solid #364d63; 
} 

だから私のオブジェクトMovieFromImdbがnullないたびは、（いくつかのデータを持っている）、私は情報を表示したいが、また、表示さ画像。

角2を使用して受信した場合、どうすればbackground: url('');の中に入れることができますか？

Answer 1

ngStyle使って、この操作を行うこともできます。このような状況selectedMovie.urlで

<div class="movie-picture" [ngStyle]="{'background-image': 'url(' + selectedMovie.url + ')'}"> 
    //Image here 
</div> 

は、お使いのコントローラの範囲に設定されたURLになります。したがって、データがimdb apiから返されると、バックグラウンドイメージが設定されます。