时间戳

首页 > 解决方案 > 如何根据布尔值更改图像，其中布尔值存储在数据库中，图像存储在角度文件中

angular - 如何根据布尔值更改图像，其中布尔值存储在数据库中，图像存储在角度文件中

问题描述

在我的角度项目中，如果数据库值为真，我应该显示一些图像，如果数据库值为假，我应该显示其他图像。我不知道如何将布尔值绑定到图像

我尝试添加字符串插值以在 Angular 的图像路径中获取布尔值。我在控制台中获取布尔值，但图像没有改变

<img src="assets/imgs/{{walkingBeam.HomePosP}}.grey-dot.PNG">

如果布尔值为 false，我希望显示 gray-dot.PNG，如果布尔值为 true，则显示 red-dot.PNG。

标签： angularionic4

解决方案

你可以简单地使用三元运算符

假设您的布尔值存储在名为的变量中flag

在你的 HTML

<img *ngIf="flag"  [src]="setImagePath(flag)">

<img *ngIf="!flag" [src]="setImagePath(flag)">

在你的 ts 文件中

setImagePath(flag) {
    let imagePath;
    imagePath = flag ? `assets/imgs/${walkingBeam.HomePosP}.greydot.PNG` : `assets/imgs/${elseImagePath}.greydot.PNG`   
     return imagePath;
   }

或simlpy 使用带有字符串连接概念的*ngIf

<img *ngIf="flag" [src]="'assets/imgs/'+walkingBeam?.HomePosP+'.greydot.PNG'" alt="">
<img *ngIf="!flag" [src]="'assets/imgs/'+elseImagePath+'.greydot.PNG'" alt="">

推荐阅读