Angular2-HTML中的动态变量

Question

I have a list which looks like this:

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

I need to the image url to be that of the id of the item. I looked at the src documentation for angular2 ( https://angular.io/docs/ts/latest/guide/template-syntax.html ) and tried the following:

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

but it did not work. How can I have the image show up based on the item's id which needs to be in the url.

Answer 1

Use property binding with string literals:

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

or string interpolation property binding with {{}} s:

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

---

Note that [src]="http://something.com/{{item.id}}/picture"> doesn't work because property binding with [] uses the syntax [property]="template_expression" and the template_expression can not contain {{}} s.