Angular 2:使用属性绑定附加字符串

angular 2: attaching string with property binding

本文关键字：绑定 字符串 属性 Angular      更新时间：2023-09-26

我正在尝试将字符串与属性绑定

例如我的对象是

{
  "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字段中没有base 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

你不必用大括号。只要做简单的:

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

试一下:

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

或者你可以试试

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

不带大括号

相关文章：