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）。当我点击menuide内部的帮助时，变量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上，构造函数上有一个事件监听器。

离子2-3 * ngIf不更新视图

4 个答案: