在Ionic中使用ngIF 3

Question

当我想在离子1中隐藏或显示div时，我曾经使用过ngshow。

我正在使用离子3，如果indexCount == 0，我试图让按钮什么也不做（没有点击事件）。

我现在有......

<div ng-if=" indexCount == 0">
<button ion-button class="previous"> Previous </button>

<div ng-if=" indexCount != 0">
 <button ion-button class="next" (click)="previousButtonClick"> Next 
</button>

Answer 1

我认为您想要使用indexCount == 0禁用或隐藏页面上的“上一个”按钮，并在最后一页indexCount == length - 1上禁用/隐藏“下一步”按钮，其中length是页数。

您可以禁用按钮以实现一致的布局

<button [disabled]="indexCount == 0" ion-button class="previous">Previous</button>
<button [disabled]="indexCount >= length - 1" ion-button class="next" (click)="previousButtonClick()">Next</button>

或者用*ngIf将其删除

<button *ngIf="indexCount != 0" ion-button class="previous">Previous</button>
<button *ngIf="indexCount < length - 1" ion-button class="next" (click)="previousButtonClick()">Next</button>

请注意，[disabled]可防止点击事件触发。

Answer 2

从Angular2开始，你需要使用*ngIf，你可以看到一个例子here。 例：

<div *ngIf=" indexCount == 0">
  <button ion-button class="previous"> Previous </button>
</div>
<div *ngIf=" indexCount != 0">
  <button ion-button class="next" (click)="previousButtonClick">
    Next 
 </button>
</div>

Answer 3

对于这种情况，您也可以使用ng-template.

例如：

<ng-template #thenTemplateClick>
  <button ion-button class="next" (click)="previousButtonClick()">
    Next 
  </button>
</ng-template>

<ng-template #elseTemplateClick>
  <button ion-button class="previous"> Previous </button>
</ng-template>

Answer 4

另一种方法是在.ts文件中添加按钮功能的条件。在模板文件上：

<button ion-button (click)='myButtonAction()>Previous</button>

在.ts文件中：

    myButtonAction(){
        if(this.indexCount == 0){
             console.log('No Action');
        } else {
             // Previous Button Desired Action
             // eg NavCtrl action or change value to trigger *ngIf update etc
        }
    }