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属性似乎是   最接近表兄的角色1＆＃39; s ng-show。但是，有一个   ＆＃34;！重要的＆＃34;区别。

ng-show和ng-hide都通过切换来管理可见性   "ng-hide"元素上的CSS类，它只是设置显示   财产到＆＃34;无＆＃34;申请时至关重要的是，Angular控制着这一点   样式和后缀与"!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>

Answer 3

试试这个

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

如何使用ng-show和隐藏ionic2

3 个答案: