如何使用ng-show和hide ionic2

约克斯·瓦拉丹(Yokesh Varadhan)

我试图显示和隐藏播放和暂停按钮,单击播放时我需要隐藏暂停按钮,反之亦然。我尝试过这样

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

}

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

每次我单击停止,只有停止可见

铁藩

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-showng-hide两个通过切换一个管理能见度"ng-hide"的元件,其施加在显示属性简单地设置为“none”上CSS类。至关重要的是,Angular控制了此样式并为其添加"!important"后记,以确保它始终覆盖该元素上设置的任何其他显示样式。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章