離子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不更新

回答

相關問題