typescript 字符串插值在Angular模板中无效

voj3qocg  于 2023-05-23  发布在  TypeScript
关注(0)|答案(1)|浏览(148)

我想在酒店没有图像时显示默认图像。下面是我的代码:
hotel.component.html:

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

hotel. components.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">
sgtfey8w

sgtfey8w1#

在属性绑定中不需要使用字符串插值({{}}
可以直接使用绑定表达式中的属性值。当酒店没有图像时显示默认图像

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

相关问题