Ionic 2-3 *ngIf 不更新视图

Question

我正在开发第 3 版的 Ionic 应用程序。

我有一个在 app.html 中定义的侧边菜单（切换菜单）

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

在app.component.ts文件中，有这个函数：

private toggleHelp = () =>{
  this.helpClicked = true;
  this.homePage.showHelp();
}

在我的主页上，我有一张说明内容的卡片。用户可以隐藏它，如果用户打开侧边菜单，他可以点击帮助按钮（在侧边菜单上声明），它会再次显示卡片。

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

Answer 1

改变

来自

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

到

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

Answer 2

我最好的猜测是您遇到了一些范围问题，因为您将函数定义为变量。尝试按如下方式更改它们：

hideHelp() {
  this.help_shown = false;
}

showHelp() {
  this.help_shown = true;
}

正如@Sajeetharan 已经提到的，您不需要将布尔变量与true 或false 显式比较。

Answer 3

试试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);        
    }

Answer 4

好的，我通过在按下按钮时在菜单中声明一个事件解决了我的问题。并且在 HomePage 的构造函数上有一个事件监听器。