如何使用 webApi 隐藏 Angular 4 中的 Div答案

【问题标题】：How to hide a Div in angular 4 with webApi如何使用 webApi 隐藏 Angular 4 中的 Div
【发布时间】：2019-03-29 18:59:50
【问题描述】：

我在这里使用 Angular 4 Web 应用程序。在这里，如果图像在文件位置显示图像，否则如果图像没有显示空白空间。（不要像这样显示）
如果有人请帮我解决这个问题

这是我的 Component.html 文件

   <div class="figure-left col-md-5 col-sm-5 col-xs-12">
 <figure class="photo">
 <img [src]="product.ItemImage" class="img-responsive img-thumbnail center-block" />
                </figure>
            </div>

这是我的 WebAPI

....etc.........
  foreach (spSpecificItems_Result item in itemList)
            {
                ITemDetail objItem = new ITemDetail();
                var image = item.ItemImage;
                if (image != null)
                {
                    base64String = System.Convert.ToBase64String(image);
                    htmlsrc = "data:image/png;base64," + base64String;

                }
                else
                {
//here else condition i want to show empty space in my output

                }

                objItem.ItemID = item.ItemID;
                objItem.ItemCode = item.ItemCode;
    etc ....etc....

【问题讨论】：

如果找不到图片就显示默认图片可以吗？

标签： angular asp.net-web-api web-applications angular2-template angular2-forms

【解决方案1】：

您可以制作自定义图像类并设置部分的高度和宽度，或者如果图像不可用，您也可以设置默认图像。

<div  class="col-md-6">
    <img  src="{{logo+''+data.image}}" alt="Item Image" height="150" width="200" style="min-height: 91px; max-width: 109px" onError="this.src='assets/images/users/medilogo.png';">
</div>

如果上面的代码不起作用，请告诉我，我可以帮助你

【讨论】：

【解决方案2】：

你可以使用这两种方法中的任何一种

*ngIf 将从 DOM 中删除元素。隐藏属性时只需将显示属性更改为无

<img *ngIf="product.ItemImage" [src]="product.ItemImage" class="img-responsive img-thumbnail center-block"/>

<img [hidden]="product.ItemImage" [src]="product.ItemImage" class="img-responsive img-thumbnail center-block"/>

如果出现问题，则使用 onError 显示默认图像

<img *ngIf="product.ItemImage" [src]="product.ItemImage" class="img-responsive img-thumbnail center-block" onError="this.src='./app/assets/images/placeholder.jpg';" alt="..."/>

【讨论】：

【解决方案3】：

你可以使用指令

<div class="figure-left col-md-5 col-sm-5 col-xs-12" *ngIf="condition">
   <figure class="photo">
      <img [src]="product.ItemImage" class="img-responsive img-thumbnail center-block" />
   </figure>
</div>

如果为真则显示块，否则为空

【讨论】：