Angular2-HTML中的動態變量

Question

我有一個看起來像這樣的清單：

<ul *ngFor="#item of items">
<li><img src="http://something.com/[this needs to be item.id]/picture"></li>
</ul>

我需要圖片網址是商品ID的網址。 我查看了angular2的src文檔（ https://angular.io/docs/ts/latest/guide/template-syntax.html ），並嘗試了以下操作：

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

但它沒有用。 如何根據需要在網址中包含的商品ID顯示圖片。

Answer 1

對字符串文字使用屬性綁定：

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

或與{{}}綁定的字符串插值屬性：

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

---

請注意， [src]="http://something.com/{{item.id}}/picture">無效，因為與[]屬性綁定使用語法[property]="template_expression" ，而template_expression可以不包含{{}} 。