Question

我正在使用*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>

Answer 1

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

Answer 2

尝试这样：

<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

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

2 个答案: