Как скрыть Div в угловых 4 с помощью webApi - PullRequest
Новая
       44

Как скрыть Div в угловых 4 с помощью webApi

0 голосов
/ 25 октября 2018

здесь я использую угловое веб-приложение 4. Здесь, если изображение находится в местоположении файла, покажите изображение, а в другом случае, если изображение отсутствует, покажите пустое пространство. (Не показывать, как это enter image description here)
если какой-либо орган, пожалуйста, помогите мне для этого решения

Это мой файл 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....

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

вы можете использовать любой из этих методов

* ngIf удалит элемент из DOM.если скрытый атрибут, просто измените свойство display на none

<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="..."/>

0 голосов
/ 25 октября 2018

Вы можете создать пользовательский класс изображения и установить высоту и ширину части, или вы также можете установить изображение по умолчанию, если изображение недоступно.

<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>

Если приведенный выше код не работает, просто сообщите мне, чтобы я мог помочь вам

0 голосов
/ 25 октября 2018

вы можете использовать директиву 

<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>

, если она истинна, она показывает блок, иначе она остается пустой

...