当我想隐藏或显示离子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>
答案 0 :(得分:10)
I think that you want to disable or hide the 'previous' button on the page with indexCount == 0
and disable/hide 'next' button on the last page indexCount == length - 1
where length
is the number of pages.
You can either disable a button for consistent layout
<button [disabled]="indexCount == 0" ion-button class="previous">Previous</button>
<button [disabled]="indexCount >= length - 1" ion-button class="next" (click)="previousButtonClick()">Next</button>
or remove it with *ngIf
<button *ngIf="indexCount != 0" ion-button class="previous">Previous</button>
<button *ngIf="indexCount < length - 1" ion-button class="next" (click)="previousButtonClick()">Next</button>
Note that [disabled]
prevents click events firing.
答案 1 :(得分: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>
答案 2 :(得分:1)
对于这种情况,您还可以使用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>
答案 3 :(得分:1)
另一种方法是在.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
}
}