Angular 如何使用ng显示和隐藏ionic2

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

<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/core'导入{Component}；
从“ionic angular”导入{NavController、NavParams、AlertController}；
@组成部分({
选择器：“页面登录”，
templateUrl:'login.html'
})
导出类登录页{
状态：boolean=false；
构造函数（公共navCtrl:NavController，
公共警报Ctrl:AlertController，
公共navParams:navParams，{
}
ionViewDidLoad（）{
log（'IonViewDidLoadLoginPage'）；
}
itemSelected（）{
this.status=true
}
停止回放（）{
控制台日志（“停止”）；
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>

然后在模板中：

<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 = true;
}

此处演示：

如果不想应用

，请不要绑定到
隐藏的
属性！重要信息


乍一看，绑定到
hidden
属性就像
Angular 1的ng秀的近亲。然而，有一个
“重要的”区别

ng show
和
ng hide
都通过切换
“ng hide”
元素上的CSS类，该类仅设置显示
应用时将属性设置为“无”。关键是，角度控制着这一点
使用
“！important”
对其进行样式设置和后记，以确保始终
替代在该元素上设置的任何其他显示样式

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>   


试试这个

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


如果要应用
，请不要绑定到隐藏属性！重要提示
css规则你是对的，但这是Angular2最接近隐藏的东西
ngIf
将项目移除并添加到DOM中，如果经常发生这种情况，可能会导致性能下降。请改用绑定css，请参见下面的我的答案因为按钮“隐藏”播放是可见的，但当我单击“播放”按钮“不隐藏”不显示“暂停”按钮我需要播放可见，然后暂停隐藏，播放后，单击“反向”应该隐藏，但当我使用UpperPlay（）{console.log（“播放”）；this.status=true；//可能这一个}暂停（）{console.log（“暂停”）；this.status=false；}顺便说一句，我看不到任何
checkStatus
property我删除了这个。暂停和播放中的状态都是可见的，但两个按钮都是可见的。请稍候，我会给你一个plnk示例。请发布
itemSelected（）
，
stopPlayback（）
codecheck，但我仍然可以看到一个按钮@tiepphan 1hey man，您是否在其他方法中触摸了此变量
status
，顺便说一句，您的代码不会做任何事情，因为您的逻辑是错误的，如果您像上面那样实现，状态不会改变。像这样更正
itemSelected（）{this.status=false；}stopPlayback（）{this.status=true；}
<ion-icon [hidden]="checkStatus" (click)="play()" name="play" ></ion-icon> 
<ion-icon [hidden]="!checkStatus" (click)="pause()" name="square"></ion-icon>   

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