如何使用 ng-show 和隐藏 ionic2答案

【问题标题】：How to use ng-show and hide ionic2如何使用 ng-show 和隐藏 ionic2
【发布时间】：2017-11-28 19:47:12
【问题描述】：

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

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

}

谁能帮我解决这个问题，在此先感谢

【问题讨论】：

请发itemSelected(), stopPlayback() 代码
现在检查，但我仍然看到 1 个按钮可见 @Tiep Phan 1
嘿伙计，你有没有用其他方法触摸过这个变量status
顺便说一句，你的代码不会做任何事情，因为你的逻辑是错误的，如果你像上面那样实现，状态不会改变。像这样正确itemSelected() { this.status = false; } stopPlayback() { this.status = true; }
plnkr.co/edit/s82OS8XaeGBMm90L2DFm?p=preview

标签： angular ionic2

【解决方案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 样式，然后将 class 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

如果您不想申请 !important，请不要绑定到 hidden 属性

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 类，它只是设置显示应用时属性为“无”。至关重要的是，Angular 控制了这一点使用"!important" 对其进行样式和附言以确保它始终覆盖在该元素上设置的任何其他显示样式。

【讨论】：

我需要播放可见然后暂停隐藏，播放后点击相反的应该被隐藏，但是当我在上面使用时两个按钮都是可见的
play(){ console.log("play"); this.status = true; // 也许这个 } pause(){ console.log("pause"); this.status = false; }
顺便说一句，我没有看到任何 checkStatus 属性
我在暂停和播放中都删除了 this.status 但两个按钮都可见
请稍等，我给你举个例子

【解决方案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>

【讨论】：

如果您想应用!important css 规则，请不要绑定到隐藏属性
你是对的，但这是 Angular2 最接近 ng-hide 的东西。 ngIf 向 DOM 中删除和添加项目，如果这种情况经常发生，性能可能会很差。
改用绑定 css，见下面我的回答
暂停按钮被隐藏播放是可见的，但是当我点击播放时它没有被隐藏，没有暂停按钮可见

【解决方案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>

【讨论】：