Question

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

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

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

如果布尔值是false，我希望显示灰点.PNG，如果布尔值是true，则显示红点.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的变量中

在您的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;
   }

OR 可以将 * ngIf 与字符串串联概念一起使用

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

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

2 个答案: