如何使用ng-show和隐藏ionic2

Question

我试图显示和隐藏播放和暂停按钮,当点击播放时我需要隐藏暂停按钮,反之亦然.我试过这样的

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

}

有人可以帮助我解决这个问题,提前谢谢

Answer 1

Angular 2没有ng-show,ng-hide,而是使用*ngIf

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

或者您可以创建css样式然后将类css绑定到元素

.hide {
  display: none;
}

然后在模板中:

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

这可能是错的

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

改变这个

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

这里演示:https://plnkr.co/edit/L59w8tmCkbEkNX5CQ1D6？p = preview

hidden如果你不想申请,不要绑定财产!important

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

乍一看,绑定到该hidden属性似乎是最接近Angular 1的ng-show的堂兄.但是,有一个"!重要"的区别.

ng-show并且ng-hide通过"ng-hide"在元素上切换CSS类来管理可见性 ,这只是在应用时将display属性设置为"none".至关重要的是,Angular控制此样式并使用postcripts "!important"来确保它始终覆盖在该元素上设置的任何其他显示样式.

Answer 2

Ionic2使用Angular2,Angular2没有ng-show和ng-hide指令.相反,您可以使用ngIf(删除和添加DOM中的项目)或hidden(类似ng-hide).

在你的代码中:

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