角度2：通過屬性綁定附加字符串

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，但無法添加基本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}}" 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屬性，