angular2 ngif無法隱藏的HTML標記時假

在HTML文件中，我有angular2 ngif無法隱藏的HTML標記時假

<p *ngIf="!checklistsready"> 
    not redy 
</p> 


<p *ngIf="checklistsready"> 
    Ready 
</p>

在我的打字稿文件我有

checklistsready: boolean = false; 


constructor(){ 
    this.fetchChecks(); 
    } 


fetchChecks(){ 
    this._checklistService.getAllchecks() //fetch data from http 
    .subscribe(
     res=>{ 
      console.log(res) //this displays the output 
       this.checklistsready = true; 
       } 

     ) 

    }

什麼能wriong因爲頁面始終顯示沒有準備好？

來源

2017-08-11 GEOFFREY MWANGI

我認爲服務沒有被調用，或者它正在角度事件循環之外解決。將列表設置爲true後，嘗試注入'ApplicationRef'並調用'tick（）'，或者添加一個按鈕並在click處理程序中記錄'checkslistsready'的值，這將觸發更改檢測輪。 –

@JasonGoemaat你有關於如何調用在線研究蜱方法IVE樣本例子，不能得到任何相關的例子 –

導入['ApplicationRef'（https://angular.io/api/core/ApplicationRef）從'@ angular/core'並將其添加到您的構造函數'構造函數（public applicationRef：ApplicationRef）'中。然後設置你的變量之後，調用'this.applicationRef.tick（）' –

我認爲無論是服務沒有得到所謂的或它是解決一個角事件循環之外。嘗試注入ApplicationRef並在將列表設置爲true後調用tick（），或者添加一個按鈕並在點擊處理程序中記錄checkslistsready的值，這將觸發更改檢測輪。

import { ApplicationRef } from '@angular/core'

在控制器：

checklistsready：布爾= FALSE;

constructor(public applicationRef: ApplicationRef) { 
    this.fetchChecks(); 
} 

fetchChecks() { 
    this._checklistService.getAllchecks() //fetch data from http 
    .subscribe(
     res=> { 
     console.log(res) //this displays the output 
     this.checklistsready = true; 

     // trigger change detection 
     this.applicationRef.tick(); 
     } 
    ) 
}

來源

2017-08-11 21:39:07

我遇到類似的CD問題。我期望訂閱回調在'NgZone'中被調用，它會在完成後自動觸發一個CD週期，但我不確定，但我相信它實際上在'NgZone'內運行，但是處於不同的階段（也許在'onMicrotaskEmpty'之後？）。我的解決方案通常是將'Subject'字段與'async'管道（例如'public checklistsready $ = new BehaviorSubject（false）;' - >'* ngIf =「checklistsready $ | async」'）一起使用，這也有助於'ChangeDetectionStrategy.OnPush'策略可以在某些情況下提高性能。 –

嘗試指定在ngIf實際語句。像這樣

*ngIf="!checklistsready == true"

來源

2017-08-11 20:52:48 Legman

你不是認真的嗎？ – Vega

這是JavaScript的，這是完全不必要的 – Kai

@Hammer寫它，你認爲會造成很大repetation和自checklistsready財產的方式是一個布爾類型，因此沒有必要比較， –

我不確定這是否會導致問題，但將異步代碼放在構造函數中是不好的做法。相反，讓你的組件實現OnInit並獲取你的數據在ngOnInit()方法。

來源

2017-08-11 21:22:58 gmferland

謝謝你指出。 –

angular2 ngif無法隱藏的HTML標記時假

回答

相關問題