web-dev-qa-db-fra.com

Comment utiliser ng-show et cacher ionic2

J'essaie d'afficher et de masquer les boutons de lecture et de pause. Lorsque l'utilisateur clique sur la lecture, j'ai besoin de masquer le bouton de pause et vice-versa. J'ai essayé comme ça

<ion-content padding>    
    <button ion-button *ngIf="status"  name="play" (click)="itemSelected()" >Play</button> 
    <button ion-button *ngIf="!status" name="square" (click)="stopPlayback()" >stop</button>        
</ion-content>

    import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';


@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})

export class LoginPage {

  status: boolean = false;

    constructor(public navCtrl: NavController,
                public alertCtrl: AlertController,
                public navParams: NavParams,) {                  

                }

    ionViewDidLoad() {
        console.log('ionViewDidLoad LoginPage');
    }
 itemSelected(){
      this.status = true
    }
    stopPlayback(){
      console.log("stop");
      this.status = false
    }

}

quelqu'un pourrait-il m'aider à résoudre ce problème, merci d'avance

 every time i click stop only stop is visiable

angularionic2
12
Yokesh Varadhan

Angular 2 n'a pas ng-show, ng-hide, utilisez * ngIf à la place

<ion-icon *ngIf="!checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon *ngIf="checkStatus" (click)="pause()" name="square"></ion-icon>

ou vous pouvez créer un style css puis lier la classe css à l'élément

.hide {
  display: none;
}

puis dans le modèle:

<ion-icon [class.hide]="!checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon [class.hide]="checkStatus" (click)="pause()" name="square"></ion-icon>

c'est peut-être faux

play(){
    console.log("play");
    this.status = false;
}
pause(){
    console.log("pause");
    this.status = false;
}

changer pour cela

play(){
    console.log("play");
    this.status = false;
}
pause(){
    console.log("pause");
    this.status = true;
}

démo ici: https://plnkr.co/edit/L59w8tmCkbEkNX5CQ1D6?p=preview

ne lie pas à la propriété hidden si vous ne voulez pas appliquer !important

http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

À première vue, la liaison à la propriété hidden semble ressembler à cousin le plus proche de ng-show de Angular 1. Cependant, il y en a un "! important" différence. 

ng-show et ng-hide gèrent la visibilité en basculant un fichier "ng-hide" Classe CSS sur l'élément, qui définit simplement l'affichage propriété à "aucune" lorsqu'elle est appliquée. De manière cruciale, Angular contrôle ceci style et le postcrit avec "!important" pour l’assurer toujours remplace tout autre style d'affichage défini sur cet élément.

25
Tiep Phan

Ionic2 utilise Angular2 et Angular2 ne possède pas les directives ng-show et ng-hide. À la place, vous pouvez utiliser soit ngIf (supprime et ajoute des éléments du DOM), soit hidden (fonctionne comme ng-hide). 

Dans votre code:

<ion-icon [hidden]="checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon [hidden]="!checkStatus" (click)="pause()" name="square"></ion-icon>
7
yarons

Essaye ça

<ion-list no-lines>
 <button ion-button clear item-end class="roundButton" (click)="viewType = !viewType">
  <ion-icon name="add-circle" item-right></ion-icon>
 </button>
 <ion-item *ngIf="viewType">
  <ion-input type="text" value=""></ion-input>
 </ion-item>
</ion-list>
0
MaryAnn