在* ngIf中使用属性绑定

时间:2017-07-22 09:30:39

标签: angular

我有一个数组,其中包含商品有图像名称的信息。 使用*ngIf时,它应显示图像或"无图像"。但是*ngIf内的属性绑定并不起作用。 这甚至可能吗?

<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

1 个答案:

答案 0 :(得分:6)

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