Comment utiliser ng-afficher et masquer ionic2

Je suis en train de montrer et de cacher de lecture et de pause bouton, lorsque le jeu est cliqué, j'ai besoin de cacher le bouton pause et vice-versa. J'ai essayé comme ceci

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

}

peut-on m'aider à résoudre ce problème, merci d'avance

s'il vous plaît poster itemSelected(), stopPlayback() code
vérifier maintenant, mais encore obtenir 1 bouton visiable @Tiep Phan 1
hey man, avez-vous abordé cette variable status dans d'autres méthode
poste le code complet s'il vous plaît, je n'ai pas le temps de deviner ce qui va pas dans votre code
c'est juste un single page app avec deux boutons, mais un bouton doit être visible en cliquant sur un autre bouton doit être indiqué
btw, votre code ne rien faire, parce que votre logique est faux, le statut ne change pas si vous mettez en œuvre, comme ci-dessus. corriger comme ceci itemSelected() { this.status = false; } stopPlayback() { this.status = true; }
plnkr.co/modifier/s82OS8XaeGBMm90L2DFm?p=preview
vous avez besoin de changer quelque chose à la valeur, si *ngIf="status" - ce que cela signifie, status = true alors tu veux qu'on ce bouton masquer lorsque vous cliquez dessus, l'action doit être status = false, même pour *ngIf="!status"
il a travaillé 🙂 merci
vous êtes les bienvenus .

InformationsquelleAutor Yokesh Varadhan | 2017-02-09

angular ionic2

26

Angulaire 2 n'a pas de ng-show, ng-hide, utilisez *ngIf au lieu
```
<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 des feuilles de styles css puis de liaison de la classe css à l'élément
```
.hide {
  display: none;
}
```
puis dans modèle:
```
<ion-icon [class.hide]="!checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon [class.hide]="checkStatus" (click)="pause()" name="square"></ion-icon>
```
ce peut-être tort
```
play(){
    console.log("play");
    this.status = false;
}
pause(){
    console.log("pause");
    this.status = false;
}
```
changement à ce
```
play(){
    console.log("play");
    this.status = false;
}
pause(){
    console.log("pause");
    this.status = true;
}
```
démo ici: https://plnkr.co/edit/L59w8tmCkbEkNX5CQ1D6?p=preview

n'engagent pas la responsabilité de hidden bien si vous ne voulez pas appliquer !important

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

Au premier coup d'œil, la liaison à l' hidden propriété semble que l'
cousin le plus proche Angulaire de 1 ng-show. Cependant, il y en a un
"!important" de la différence.

ng-show et ng-hide la fois de gérer la visibilité par le basculement d'un
"ng-hide" Classe CSS sur l'élément, qui définit simplement l'écran
la propriété "none" lorsqu'il est appliqué. Surtout, Angulaire contrôle ce
style et postscripts avec "!important" pour s'assurer de toujours
remplace tous les autres styles d'affichage sur l'élément.
- j'ai besoin de jouer à plus visible pause pour être caché, après jouer cliquez inverse devrait être caché, mais les deux boutons sont visibles lorsque j'utilise ci-dessus
- hey man, ce code est faux
- jouer(){ console.log("jouer"); ce.statut = true; // peut-être une } pause(){ console.log("pause"); ce.statut = false; }
- btw, je ne vois pas de checkStatus propriété
- j'ai enlevé ce.statut à la fois de mettre en pause et de jouer, mais les deux boutons sont visibles
- veuillez patienter, je vais vous donner plnk exemple
- hey principal, veuillez caisse de ma mise à jour plnk
- u pourrait vérifier la mise à jour de l'image une fois @Tiep Phan
- je ne vois pas de mise à jour
InformationsquelleAutor Tiep Phan
8

Ionic2 utilise Angular2, et Angular2 n'a pas le ng-show et ng-hide directives. Au lieu de cela, vous pouvez utiliser ngIf (supprime et ajoute des éléments du DOM) ou 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>   
```
- ne pas se liant à la propriété hidden si vous ne voulez appliquer !important règle css
- Vous avez raison, mais c'est la chose la plus proche Angular2 a pour ng-hide. ngIf supprime et ajoute des éléments dans le DOM, ce qui peut avoir des mauvaises performances, si cela se passe beaucoup de choses.
- l'utilisation de la liaison css au lieu de cela, voir ma réponse ci-dessous
- pause bouton caché jeu est visible, mais quand je clique sur jouer sa n'obtenant pas caché pas de bouton pause est visible
- cette solution ne fonctionne pas pour moi
InformationsquelleAutor yarons

Essayer Cette

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

InformationsquelleAutor MaryAnn

Vous devez vous connecter pour publier un commentaire.