简体   繁体   English

为什么在angular 6中,我的ngif等条件不起作用?

[英]Why In angular 6 my ngif and else condition is not working?

I am using *ngif but it's not working.My code are as below if some one have idea pls help me. 我正在使用*ngif但无法正常工作。如果有人有想法请我帮忙,我的代码如下。

<div class="cameracover" *ngIf="prod.productName === 'FLIP BOOK'; then ifcondition else elsecondition">                                                                
      <div class="flipbook-img" #ifcondition>
            <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1536062876/book-service.jpg" />
       </div>
  <div #elsecondition>
     <div class="cameraicon" *ngIf="prod.klasActPreviewimages && prod.klasActPreviewimages.length==0 && prod.noOfImages!=0" (click)="getPreview(studcart.firstName,studcart.userID,prod.cartID,prod.productId,prod.noOfImages,prod.choolPackageId)">
             <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1535474911/camera.svg" />
                                      <p>Choose Photo</p>
     </div>
  </div>                                                  
</div>

Using *ngIf you can do as follows, use ng-template for showing if and else block 使用* ng如果可以执行以下操作,请使用ng-template显示if和else块

<div *ngIf="prod.productName === 'FLIP BOOK';then ifcondition else other_content">
   content here ...
 </div>

<ng-template #ifcondition>content here...</ng-template>

<ng-template #other_content>other content here...</ng-template>

Try like this: 尝试这样:

<div class="cameracover" *ngIf="prod.productName === 'FLIP BOOK'; then ifcondition else elsecondition">
</div>


<ng-template #ifcondition>
    <div class="flipbook-img">
        <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1536062876/book-service.jpg" />
  </div>
</ng-template>


<ng-template #elsecondition>
  <div class="cameraicon" *ngIf="prod.klasActPreviewimages && prod.klasActPreviewimages.length==0 && prod.noOfImages!=0" (click)="getPreview(studcart.firstName,studcart.userID,prod.cartID,prod.productId,prod.noOfImages,prod.choolPackageId)">
        <img src="//res.cloudinary.com/klassaktcontent/image/upload/v1535474911/camera.svg" />
      <p>Choose Photo</p>
  </div>
</ng-template>

Working Demo 工作演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM