Ionic framework 在离子3中使用ngIF

当我想在ionic 1中隐藏或显示div时，我经常使用ngshow

我使用的是ionic 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>

以前的
下一个

从Angular2开始，您需要使用

*ngIf

，您可以看到一个示例。
示例：

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

以前的
下一个

我认为您希望禁用或隐藏

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>

---

请注意，

[disabled]

防止单击事件触发。

对于这种情况，您也可以使用

示例：

下一个
以前的

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

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

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

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

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