Angular模板字符串插值失效：默认图片显示异常问题

问题场景 #

我希望酒店无图片时显示默认图片，但当前Angular模板里的字符串插值未生效，cdn变量无法解析为实际路径。

现有代码 #

hotel.component.html

<img [src]="hotel.image!='' ? '{{cdn}}/{{hotel.image}}.jpg' : '{{cdn}}/images/no-image.png'">

hotel.component.ts

...
export class HotelsComponent {
  hotel!: HotelViewModel;
  cdn!:string;

  ngOnInit(): void {
    this.cdn='http://cdn.example.com';
  }
 }

当前输出 #

<img src="{{cdn}}/images/no-image.png">

期望输出 #

<img src="http://cdn.example.com/images/no-image.png">

问题原因 #

属性绑定[src]的表达式内部嵌套了字符串插值{{}}，Angular在处理属性绑定表达式时，不会二次解析内部的插值语法，导致{{cdn}}被当作纯字符串输出，没有替换为变量值。

解决方案 #

方法1：直接在表达式中拼接字符串 #

移除插值语法，使用ES6模板字符串或普通字符串拼接的方式组合路径，Angular会直接解析表达式中的变量：

<!-- 使用模板字符串 -->
<img [src]="hotel.image !== '' ? `${cdn}/${hotel.image}.jpg` : `${cdn}/images/no-image.png`">

或用+拼接：

<!-- 使用普通字符串拼接 -->
<img [src]="hotel.image !== '' ? cdn + '/' + hotel.image + '.jpg' : cdn + '/images/no-image.png'">

方法2：将路径逻辑移至组件类 #

把路径拼接逻辑封装到组件的方法中，模板直接调用该方法获取图片路径，让模板更简洁，逻辑更集中：

修改hotel.component.ts

...
export class HotelsComponent {
  hotel!: HotelViewModel;
  cdn!:string;

  ngOnInit(): void {
    this.cdn='http://cdn.example.com';
  }

  getHotelImageUrl(): string {
    return this.hotel.image !== '' 
      ? `${this.cdn}/${this.hotel.image}.jpg` 
      : `${this.cdn}/images/no-image.png`;
  }
 }

修改hotel.component.html

<img [src]="getHotelImageUrl()">

内容的提问来源于stack exchange，提问作者MB_18