Question

我正在尝试使用自然绑定附加字符串

例如我的对象是

{
  "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字段中没有基本网址我想将它附加在角度模板网址中

模板：

<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，但我无法添加基本网址

我期待网址为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}}" alt="">

Answer 2

或者你可以尝试

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

没有大括号

Answer 3

你不必使用花括号。只是做简单：

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

<tag [someAttr]="someValue">

在角度中，这意味着someValue将被评估（就像在{{}}内部）并分配给someAttr，所以对于字符串部分，你应该使用像纯JS中的引号

<tag someAttr="someString">

表示someString将被解析为模板，（您必须使用{{}}来评估imgUrl）并分配给someAttr

在你的例子中<img src="www.example.com/{{prod.imgUrl}}">

someAttr是@Input（）属性组件，或HTMLElement属性，

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

3 个答案: