我试图显示和隐藏播放和暂停按钮,单击播放时我需要隐藏暂停按钮,反之亦然。我尝试过这样
<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-show
和ng-hide
两个通过切换一个管理能见度"ng-hide"
的元件,其施加在显示属性简单地设置为“none”上CSS类。至关重要的是,Angular控制了此样式并为其添加"!important"
了后记,以确保它始终覆盖该元素上设置的任何其他显示样式。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句