javascript - Angular 2 : attaching string with property binding

Question

我正在尝试使用属性绑定(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 字段中没有基本 url，所以我想将它附加到 Angular 模板 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>

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

我希望 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

Answer 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 属性，