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

来源

2017-10-10 Junior

只是一个快速提示：这不是一个“angularjs”问题，而是一个“有角度”的问题。 –

好的，对不起。谢谢你 – Junior

你可以试试我在这里说的：https://ionic-n35gsm.stackblitz.io – Junior

变化

从

<ion-card margin *ngIf="(help_shown == true)" class="card-help">

要

<ion-card margin *ngIf="help_shown" class="card-help">

来源

2017-10-10 13:08:43 Sajeetharan

它的行为相同:( – Junior

我最好的猜测是，你会碰到一些范围问题，因为你将你的函数定义为变量。尝试改变他们如下：

hideHelp() { 
    this.help_shown = false; 
} 

showHelp() { 
    this.help_shown = true; 
}

正如@Sajeetharan已经提到的，你并不需要一个布尔变量明确比较true或false。

来源

2017-10-10 14:03:30 David

我认为你是正确的范围。当参考不在主页上时，但是被移动到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);   
    }

来源

2017-10-10 14:15:04 Sampath

你好，我已经试过这个解决方案。但它不工作： – Junior

你能模拟这个吗？https://stackblitz.com/ – Sampath

嘿，你在这里你去：https://ionic-n35gsm.stackblitz.io（模拟）和版本链接： https://stackblitz.com/edit/ionic-n35gsm – Junior

好吧，我通过在按下按钮时在menuside声明事件解决我的问题。在主页上有一个构造函数的事件监听器。

来源

2017-10-11 11:43:59 Junior

离子2-3 * ngIf不更新

回答

相关问题