javascript - Angular 2:通过属性绑定(bind)附加字符串

我正在尝试使用适当的绑定(bind)附加字符串

例如我的对象是

{
  "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字段中没有基本网址，所以我想将其附加在 Angular 模板网址中

模板:

<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>

我想在模板字段中为ImageUrl添加example.com，但无法添加基本URL

我期望网址是baseurl + path

www.example.com/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

最佳答案

您不必使用大括号。只需做简单:
<img [src]="'www.example.com/' + prod.imgUrl"><tag [someAttr]="someValue">
在angular中，这意味着someValue将被求值(就像{{}}内部一样)并分配给someAttr，因此对于字符串部分，您应使用纯JS中的引号
<tag someAttr="someString">
意味着someString将像模板一样进行解析(您必须使用{{}}评估imgUrl)并分配给someAttr
在你的<img src="www.example.com/{{prod.imgUrl}}">someAttr是@Input()属性
组件或HTMLElement属性，

关于javascript - Angular 2:通过属性绑定(bind)附加字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40525795/