Angular字符串属性绑定用法及绑定失效问题求助

这个问题我之前也碰到过，核心原因是Angular对插值表达式和属性绑定的解析逻辑完全不同：

• 你用插值表达式的写法src="car/{{car.id}}"时，Angular会把{{car.id}}替换成对应的值，最终拼接成完整的字符串路径（比如car/1），所以能正常加载图片。
• 但属性绑定[src]="car/car.id"里的内容是JavaScript表达式，这里的/会被当成除法运算符，Angular会尝试计算car变量除以car.id的结果，这显然不是你想要的路径，所以图片加载失败。

正确的属性绑定写法有两种： #

1. 使用ES6模板字符串（推荐）
   用反引号包裹路径，通过${变量}的方式拼接，和插值的逻辑一致但符合属性绑定的语法：

   <span *ngFor="let car of Car; let i = index;"> 
     <img [src]="`car/${car.id}`"> 
   </span>
   

2. 用加号做字符串拼接
   把静态部分用单引号包裹，再和变量拼接：

   <span *ngFor="let car of Car; let i = index;"> 
     <img [src]="'car/' + car.id"> 
   </span>
   

两种写法都能让Angular正确解析出你需要的图片路径，解决加载失败的问题～

内容的提问来源于stack exchange，提问作者蒋建雨