离子2-3 * ngIf不更新
我开发的版本,这是app.html离子2-3 * ngIf不更新
<ion-menu [content]="content" (ionClose)="menuClosed()(ionOpen)="menuOpened()">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<button menuClose ion-item (click)="toggleHelp()">
<ion-icon item-start name="help-circle"></ion-icon>
<ion-label>Help</ion-label>
</button>
</ion-content>
表示的离子应用3.
我有一个侧菜单(切换菜单)视图
在文件app.component.ts,还有这个功能:
private toggleHelp =() =>{
this.helpClicked = true;
this.homePage.showHelp();
}
在我的主页,我有expla卡在东西。用户可以隐藏它,如果用户打开侧边菜单,他可以点击按钮帮助(在侧边菜单上声明),它会再次显示该卡。
home.html的样子:
<ion-header>
<ion-navbar>
<button ion-button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content no-padding>
<ion-refresher (ionRefresh)="doRefresh()"></ion-refresher>
<ion-card margin *ngIf="(help_shown == true)" class="card-help">
<span class="button_acknowledgement">
<button ion-button clear color="bluelight" (click)="hideHelp()">I GOT IT</button>
</span>
</ion-card>
</ion-content>
在home.ts
:
export class HomePage {
help_shown = true;
constructor(private platform: Platform, private zone: NgZone) {
}
private hideHelp =() =>{
this.help_shown = false;
console.log("help_shown: "+this.help_shown)
}
public showHelp =() =>{
this.zone.run(() => {
this.help_shown = true;
console.log("help_shown: "+this.help_shown)
});
}
所以,现在,当我在我的按钮,点击,该卡将被隐藏(因为变量help_shown将被改为false)。当我点击菜单旁边的帮助时,变量help_shown将被函数修改(它会通过true,我记录它,所以我确定它正在工作),但是即使认为* ngIf应该出现,卡也不会出现做它出现。我尝试过ngZone,但没有成功。有人可以帮我吗? PS:如果我在主页内创建一个按钮,这将改变变量help_shown,它也会工作。
你可以试试我说的话:https://ionic-n35gsm.stackblitz.io
变化
从
<ion-card margin *ngIf="(help_shown == true)" class="card-help">
要
<ion-card margin *ngIf="help_shown" class="card-help">
它的行为相同:( – Junior
我最好的猜测是,你会碰到一些范围问题,因为你将你的函数定义为变量。尝试改变他们如下:
hideHelp() {
this.help_shown = false;
}
showHelp() {
this.help_shown = true;
}
正如@Sajeetharan已经提到的,你并不需要一个布尔变量明确比较true
或false
。
我认为你是正确的范围。当参考不在主页上时,但是被移动到app.component.ts,范围将是不同的。我相信使用一个组件,然后输出需要事件来触发更新 –
@StevenScott感谢您的输入'help_shown'仍然保持一个实例变量,所以他可以用'this'来访问它,不需要调用函数。 – David
对不起,你是正确的,我会删除那个评论,因为我在想别的东西(按钮功能)而不是问题中的东西 –
试用setTimeout()
并让我知道。
的.html
<ion-card margin *ngIf="help_shown" class="card-help">
.TS
help_shown:boolean = true;
constructor(private platform: Platform) {
}
showHelp(){
setTimeout(() => {
this.help_shown = true;
},500);
}
好吧,我通过在按下按钮时在menuside声明事件解决我的问题。在主页上有一个构造函数的事件监听器。
只是一个快速提示:这不是一个“angularjs”问题,而是一个“有角度”的问题。 –
好的,对不起。谢谢你 – Junior
你可以试试我在这里说的:https://ionic-n35gsm.stackblitz.io – Junior