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

Question

在我的 angular 项目中，如果数据库值为真，我应该显示一些图像，如果数据库值为假，我应该显示其他图像。不知道怎么给图片绑定布尔值

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

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

我希望布尔值为false时显示灰色-dot.PNG，布尔值为true时显示红色-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' />

更新：

如果你想从数据库中读取属性，你需要创建一个服务并在组件中使用。

@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

的变量中

In your Html

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

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

In your ts file

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

OR simlpy 使用 *ngIf 和字符串连接概念

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

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

How to change image based on the Boolean value, where Boolean value is stored in database and image is store in the angular file

angular

ionic4