2016-03-29 3 views
1

での動的変数は、私はこのようになりますリストを持っています。私はangular2のsrcドキュメント(https://angular.io/docs/ts/latest/guide/template-syntax.html)を見て、次のことを試してみました:Angular2 HTML

<img [src]="http://something.com/{{item.id}}/picture"> 

が、それはうまくいきませんでした。どのように私は、URLにする必要があるアイテムのIDに基づいて画像を表示させることができます。文字列リテラルを結合

答えて

6

使用プロパティ:

<img [src]="'http://something.com/' + item.id + '/picture'"> 

{{}} Sと結合した文字列の補間プロパティ:

<img src="http://something.com/{{item.id}}/picture"> 

注プロパティは[]使用を結合するので[src]="http://something.com/{{item.id}}/picture">が機能しないこと[property]="template_expression"template_expressionには{{}}を含めることはできません。

+0

Angular 1の 'ng-src'のように、' http:// something.com // picture'のような間違ったURLを2番目に作ることができるように、1番目は正しいと思いますか? –

+0

ありがとう!できます!私のアプローチがうまくいかなかった理由を説明してくれてありがとう! – user2924127

+0

@PankajParkar、 'id'が' item'のプロパティでない場合、どちらの形式でも不正なURLが生成されます。最初は '' http://something.com/undefined/picture''と2番目の '' http://something.com//picture''を生成します。 –