Javascript 角度2：使用属性绑定附加字符串

我正试图用属性绑定来连接字符串

例如，我的对象是

{
  "name": "The Walking Dead",
  "imageUrl": "/title/tt1520211/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=2240084122&pf_rd_r=1Q5ZRDHSA2ZK5S6Q31WN&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=tvmeter&ref_=chttvm_tt_1",
  "rating": "8.6"
},

因为我在imageUrl字段中没有基本url，所以我想将其附加到角度模板url中

模板：

<tbody *ngFor="let prod of products">
<tr >
  <td><img [src]="'www.example.com/'+{{prod.imgUrl}}" alt=""></td>
  <td>{{prod.name}}</td>
  <td>{{prod.rating}}</td>
</tr>

</tbody>

试着这样做：

<img src="www.example.com/{{prod.imgUrl}}" alt="">

或者您可以试试

<td><img [src]="'www.example.com/' + prod.imgUrl" alt=""></td>

---

如果没有大括号，就不必使用大括号。只要做简单的事情：

---

在angular中，这意味着将计算

someValue

（就像在

{{}}

中一样）并将其分配给

someAttr

，因此对于字符串部分，您应该使用纯JS中的引号

---

表示将像模板一样解析

someString

（必须使用

{{}}

来计算imgUrl）并将其分配给

someAttr

在您的示例中，例如

---

someAttr

是中的@Input（）属性 组件或HtmleElement属性

<td><img [src]="'www.example.com/' + prod.imgUrl" alt=""></td>