À l'aide de ngIF Ionique dans les 3

J'ai l'habitude d'utiliser ngshow quand j'ai voulu le cacher ou montrer les divs dans ionique 1.

Je suis en utilisant ionique 3 et je suis en train de faire le bouton ne fait rien (pas de cliquez sur l'événement) si le indexCount == 0.

J'ai actuellement...

<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>
InformationsquelleAutor cdh429 | 2018-01-23
  1. 10

    Je pense que vous voulez désactiver ou masquer le "précédent" bouton sur la page avec indexCount == 0 et désactiver/masquer le bouton "suivant" sur la dernière page indexCount == length - 1 où length est le nombre de pages.

    Vous pouvez soit désactiver un bouton pour la mise en page cohérente

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

    ou de le supprimer avec *ngIf

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

    Noter que [disabled] empêche cliquez sur les événements de tir.

    InformationsquelleAutor Maciej Caputa
  2. 2

    De Angular2 vous devez utiliser *ngIf, vous pouvez voir un exemple ici.

    Exemple:

    <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>
    InformationsquelleAutor ChesterLaborde
  3. 1

    Pour cette situation, vous pouvez également utiliser le ng-modèle.

    Exemple: 

    <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>
    InformationsquelleAutor Eber
  4. 1

    Une autre manière de faire ce qui pourrait être de rajouter une condition sur le bouton de fonction dans les .fichier ts. Sur le fichier de modèle: 

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

    Sur le .ts fichier:

        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
        }
    }
    InformationsquelleAutor Chris Scutt