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

Question

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

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

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

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

Answer 1

你应该这样做。

在组件ts文件中。

imageUrl: any;
check: boolean;
ngOnInit(){
  if(this.check){
     this.imageUrl = 'assets/imgs/' + walkingBeam.HomePosP;
  }else{
     this.imageUrl = 'assets/imgs/elseimage.png';
  }
}

在HTML文件中

<img [src]='imageUrl' />

更新：

如果要从DB读取属性，则需要创建服务并在组件中使用。

@Injectable()
export class ImageService
{
  constructor(private http: HttpClient) {    
  }

  GetImage(id) {
    return this.http.get('/api/image?id=' + id);
  }
}

在你的后端，你需要通过Spring Rest API或ASP.NET Web API创建一个API来阅读你的财产。

这是ASP.NET Web API的原型。

[Route("api/image")]
 public string GetImage(int id)
 {
      // handle your logic to get image url
 }

在组件ts文件中

constructor(private imageService: ImageService){
}
 ngOnInit(){
      this.imageService.GetImage(id).subscribe(data => { 
         this.imageUrl = data;
     });
}

Answer 2

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

假设您的布尔值存储在名为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;
   }

或者使用* ngIf和字符串连接概念

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