javascript - angular 2: koppla sträng med egenskapsbindning

Jag försöker bifoga sträng med egenskapsbindning

till exempel mitt objekt är

{
  "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"
},

eftersom jag inte har en bas-URL i imageUrl-fältet vill jag bifoga den i Angular-mallens URL

mall :

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

Jag försöker lägga till example.com för min ImageUrl i mitt mallfält och jag kan inte lägga till bas-URL

Jag förväntar mig att URL ska vara 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

Svar #1

Du behöver inte använda måsvingar. Gör bara enkelt:

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

<tag [someAttr]="someValue">

I Angular betyder detta att someValue kommer att utvärderas (precis som inne i {{}}) och tilldelas someAttr, så för strängdelen bör du använda citattecken som i vanlig JS

<tag someAttr="someString">

betyder att someString kommer att tolkas som en mall, (du måste använda {{}} för att utvärdera imgUrl) och tilldelas someAttr

i ditt t.ex. <img src="www.example.com/{{prod.imgUrl}}">

someAttr är en @Input()-egenskap i komponenten, eller en HTMLElement-egenskap,

Svar #2

Prova det så här:

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