在* ngIf中使用属性绑定 [英] Use Property Binding in *ngIf

查看:83
本文介绍了在* ngIf中使用属性绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个数组,其中包含要约具有图像名称的信息. 使用*ngIf,它应该显示图像或无图像".但是*ngIf中的属性绑定无效. 这有可能吗?

I have an Array which contains the information if an Offer has an image name. With the *ngIf it should show either the image or "No Images". But the Property Binding within *ngIf doesn't work. Is this even possible?

<div class="m-c-o" *ngFor="let offer of offers">

    <div class="m-c-p" *ngIf="showOffers">
      <div class="m-c-img-c">
        <img *ngIf="{{ offer.U_D__IMAGE }} != false" src="{{ imagePath + offer.U_D__IMAGE }}">
        <div *ngIf="{{ offer.U_D__IMAGE }} === false">
          <i class="materials-icons">photo_camera</i>
          <div class="m-c-img-ni">No Images</div>
        </div>
      </div>
    </div>

 </div

推荐答案

*ngIf指令不需要插值

<div class="m-c-img-c">
    <img *ngIf="offer.U_D__IMAGE" [src]="imagePath + offer.U_D__IMAGE">
    <div *ngIf="!offer.U_D__IMAGE">
      <i class="materials-icons">photo_camera</i>
      <div class="m-c-img-ni">No Images</div>
    </div>
</div>


您可以使用*ngIf else

<div class="m-c-img-c">
    <img *ngIf="offer.U_D__IMAGE else noResults" [src]="imagePath + offer.U_D__IMAGE" />
    <ng-template #noResults>
       <div>
         <i class="materials-icons">photo_camera</i>
         <div class="m-c-img-ni">No Images</div>
       </div>
    </ng-template>
</div>

这篇关于在* ngIf中使用属性绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆